Создать слайд-шоу с кодом JavaScript
Слайд-шоу придает вашему сайту элегантный вид, особенно если слайд-шоу на целевой странице привлекает пользователей и направляет трафик на важный контент на вашем сайте. Хотя существует множество плагинов для создания готовых слайд-шоу, вот исходный код для создания простого слайд-шоу с использованием JavaScript. Выполните два описанных ниже процесса, чтобы добавить слайд-шоу на свой сайт.
Шаг 1: Скопируйте и вставьте приведенный ниже скрипт в раздел
своей страницы.<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/widget-codes/ ***********************************************/ 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-код в раздел
своей страницы.<table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="" name="SlideShow" width=476 height=301> </td> </tr> </table></center> <script type="text/javascript"> runSlideShow(); </script>
Параметры настройки
- Замените изображения в скрипте изображениями вашего сайта.
- Добавьте больше изображений, продолжив массив, например Pic[0], Рис[1], Рис[2], и т.д.
- Настройте высоту и ширину слайд-шоу в HTML-коде, помещенном в.
- Измените атрибуты границы таблицы, заполнения ячеек и расстояния между ячейками, чтобы добавить границу к слайд-шоу.