TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как создать слайд-шоу с помощью JavaScript?

284

Независимо от того, используете ли вы конструктор веб-сайтов или систему управления контентом, создать слайд-шоу для вашего сайта очень легко. Например, в WordPress есть сотни плагинов для слайд-шоу и галерей, позволяющих создавать потрясающие слайдеры за считанные минуты. Точно так же конструкторы сайтов, такие как Weebly, предлагают элемент слайд-шоу, и даже такой фреймворк, как Bootstrap, предлагает элемент карусели. Однако при создании простого статического HTML-сайта нет других вариантов, кроме вставки собственного кода слайд-шоу. Если вы ищете такой автономный блок слайд-шоу, вот полный код слайд-шоу с JavaScript.

Зачем использовать слайд-шоу?

Добавление слайд-шоу на ваш сайт помогает в следующих случаях:

  • Элегантно смотрится на вашей веб-странице.
  • Добавление слайд-шоу на целевую страницу привлечет пользователей.
  • Вы можете показать несколько важных страниц своего сайта на слайдах и привлечь на них трафик.

Слайд-шоу JavaScript

Хотя существует множество плагинов для создания готовых слайд-шоу, вот исходный код для создания простого слайд-шоу с использованием JavaScript. Вы можете выполнить описанный ниже двухэтапный процесс, чтобы добавить это слайд-шоу на свой веб-сайт.

1 Скрипт для слайд-шоу

Скопируйте и вставьте приведенный ниже сценарий в нижний колонтитул своей веб-страницы, чтобы вставить слайд-шоу. Вы можете вставить код после основного раздела своей веб-страницы, чтобы избежать блокирования ресурсов при отображении в Google PageSpeed и повысить скорость загрузки страницы.

<script type="text/javascript"> // Set slideshow speed in milliseconds var slideShowSpeed = 3500; // Set duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // Just add as many as images as you want one by one // Replace the images with your own site images Pic[0] = 'Image1 URL Here' Pic[1] = 'Image2 URL Here' Pic[2] = 'Image3 URL Here' Pic[3] = 'Image4 URL Here' // do not edit anything below this line /*********************************************** * Get more website widget codes @ https://www.webnots.com/demos/ ***********************************************/ var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } // End --> </script>

2 HTML для слайд-шоу

Следующим шагом является копирование и вставка приведенного ниже HTML-кода в раздел вашей страницы. Вы можете вставить этот код, когда хотите, чтобы появилось слайд-шоу.

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="" name='SlideShow' width=476 height=301> </td> </tr> </table> <script type="text/javascript"> runSlideShow(); </script>

 Настройка параметров слайд-шоу

Вы можете настроить внешний вид слайд-шоу JavaScript, используя следующие параметры.

  • Замените изображения в скрипте изображениями вашего победившего сайта.
  • Добавьте больше изображений, продолжив массив, например Pic [0], Pic [1], Pic [2] и т.д.
  • Отрегулируйте высоту и ширину слайд-шоу в HTML-коде, размещенном в.
  • Измените атрибуты границы таблицы, заполнения ячеек и расстояния между ячейками, чтобы добавить границу к слайд-шоу.
  • Вы можете настроить слайд-шоу и продолжительность плавного перехода в миллисекундах в соответствии с вашими потребностями.

Как это выглядит?

Слайд-шоу будет выглядеть так, как показано ниже, и мы рекомендуем использовать изображения полной ширины для вашего макета, чтобы он выглядел красиво.

Как создать слайд-шоу с помощью JavaScript?

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее