Создать слайд-шоу с кодом 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-коде, помещенном в.
  • Измените атрибуты границы таблицы, заполнения ячеек и расстояния между ячейками, чтобы добавить границу к слайд-шоу.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *