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

Як створити слайд -шоу за допомогою JavaScript?

17

Незалежно від того, чи використовуєте ви конструктор веб -сайтів або систему керування вмістом, створити слайд -шоу для свого сайту дуже просто. Наприклад, 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
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі