Как вы знаете, слайд-шоу состоит из нескольких изображений и видео, которые меняются с течением времени. Так как же создать простое слайд-шоу изображений с помощью Javascript?
Сначала мы вводим наш тег IMG в раздел HTML.
Затем мы даем ему имя, ширину и высоту. Эти значения могут меняться в зависимости от ваших пожеланий. Теперь мы выбираем изображения для использования в слайд-шоу в соответствии с размерами, указанными в теге img. Если вам сложно найти картинку, вы можете найти картинки нужного размера в Интернете. Вы можете использовать раздел JavaScript, скопировав адреса изображений с этих страниц.
<h1>How do we make basic image slideshow in JavaScript?</h1> <img name = "slide" width="600px" height="550px">
После завершения нашего небольшого кода на стороне HTML, давайте перейдем к основной части, JavaScript. Прежде всего, давайте определим переменную, которая будет постоянно изменять наши изображения:
var i = 0;
Затем мы определяем переменную, чтобы иметь возможность использовать изображения, адреса которых мы скопировали:
var images = [ 'https://i.picsum.photos/id/930/600/550.jpg?hmac=kKHfKs3qsuq7uoEIS7Ur-1vQTxDRK7gX1skPd96rIaY' , 'https://i.picsum.photos/id/788/600/550.jpg?hmac=1xjDBtOo_s0Vmd0GWOSx94e_gVSL0U4FbJeqkQuazKs' , 'https://i.picsum.photos/id/929/600/550.jpg?hmac=_g-KQ7PUQeAYYlaEOGhCv-r9pnk1NWaF_wC6fMDdBsQ' , 'https://i.picsum.photos/id/969/600/550.jpg?hmac=DY_HHMaA2njmR8OsUWzjJtdskvCHzpPjQwx4bG8gOJw' , ];
Как мы уже говорили в начале, слайд-шоу состоит из изображений, меняющихся с течением времени. Теперь нам нужно установить этот временной интервал:
var timeDuration = 2000; //(1000 = 1 second)
Теперь мы создаем функцию, которая объединяет все наши переменные и выполняет основную работу.
function slideFunction () {}
Первое, что мы сделаем, это свяжем переменную images в разделе HTML с тегом img в JavaScript. раздел. Сделать это:
document.slide.src = images [i];
Теперь нам нужно написать код, который позволит нашим изображениям последовательно вращаться.
if ( i < images.length - 1) {
i++;
}
else {
i = 0;
}
Глядя на этот код, вы можете спросить, почему i ‹images.length - 1?
Давайте обсудим это после завершения нашего кода.
Теперь применим к нашей функции длительность времени:
setTimeout( "slideFunction()", timeDuration);
Теперь изображения появятся в заданном нами временном интервале, а после этого интервала изображения переместятся к другому изображению.
Теперь нам нужно убедиться, что написанные нами коды видны на нашем веб-сайте. Для этого:
window.onload = slideFunction();
С помощью этого кода все коды, которые мы пишем в функции slideFunction, начнут работать после полной загрузки веб-страницы.
Давайте соберем все коды, которые мы написали:
var i = 0;
var images = [
'https://i.picsum.photos/id/930/600/550.jpg?hmac=kKHfKs3qsuq7uoEIS7Ur-1vQTxDRK7gX1skPd96rIaY' ,
'https://i.picsum.photos/id/788/600/550.jpg?hmac=1xjDBtOo_s0Vmd0GWOSx94e_gVSL0U4FbJeqkQuazKs' ,
'https://i.picsum.photos/id/929/600/550.jpg?hmac=_g-KQ7PUQeAYYlaEOGhCv-r9pnk1NWaF_wC6fMDdBsQ' ,
'https://i.picsum.photos/id/969/600/550.jpg?hmac=DY_HHMaA2njmR8OsUWzjJtdskvCHzpPjQwx4bG8gOJw' ,
];
var timeDuration = 2000;
function slideFunction() {
document.slide.src = images[i];
if ( i < images.length - 1) {
i++;
}
else {
i = 0;
}
setTimeout( "slideFunction()", timeDuration);
}
window.onload = slideFunction();
В конце концов, если мы запустим наш код, мы получим тот же проект, что и на видео.
Теперь давайте посмотрим на вопрос, с которым мы столкнулись выше. Почему бы не i ‹images.length, i‹ images.length-1?
Чтобы понять это ясно, давайте рассмотрим и сравним оба случая.
Как вы можете видеть по разнице, когда мы используем i ‹images.length, он в конечном итоге возвращает пустое значение. Рекомендуется использовать i ‹images.length-1, так как это искажает изображение слайда.
