<style>
.slider
{
position:absolute;
top:0;
left:0;
width:100%;
}
</style>
<img src='1.jpg' class='slider' id='img1' onclick="hide('img1','img2',1)">
<img src='2.jpg' class='slider' id='img2' onclick="hide('img2','img3',1)">
<img src='3.jpg' class='slider' id='img3' onclick="hide('img3','img4',1)">
<img src='4.jpg' class='slider' id='img4' onclick="hide('img4','img5',1)">
<img src='5.jpg' class='slider' id='img5' onclick="hide('img5','img1',1)">
<script>
function hide(name,name1,opacity)// скрываем картинку name и показываем name1
{
myimg=document.getElementById(name);// получаем объект картики по id name
myimg1=document.getElementById(name1);// получаем объект картики по id name1
if(opacity==1)//если прозрачность =1 то мы отображаем второй слайд.
myimg1.style.display='block';
myimg.style.opacity=opacity;// меняем прозрачность
myimg1.style.opacity=1-opacity;//меняем прозрачность
if(opacity-.01>=0)// пока прозрачность больше нуля
setTimeout(function(){hide(name,name1,opacity-0.01)}, 10);//изменяем прозрачность
else
{
myimg.style.display='none';//скрываем невидимую картинку
}
}
sliden=4;
function slide()
{
if(sliden==1)// если надо скрыть слайд 1 и показать слайд 2
{
hide('img1','img2',1);// скрывает вторую картинку и показывает первую
sliden=2;// меняем номер слайда чтобы в следующий раз скрыть другой слайд
return;//выходим из функции чтобы не выполнялись остальыне условия
}
if(sliden==2)
{
hide('img2','img3',1);
sliden=3;
return;
}
if(sliden==3)
{
hide('img3','img4',1);
sliden=4;
return;
}
if(sliden==4)
{
hide('img4','img5',1);
sliden=5;
return;
}
if(sliden==5)
{
hide('img5','img1',1);
sliden=1;
return;
}
}
setInterval(slide,4000);// функция смены слайда будет выполняться каждые 4и секунды.
</script>
Вариант №2.
СОБЫТИЯ
window.onload, Событие происходит, когда объект был загружен, чаще всего используется в элементе <Body>, чтобы выполнить скрипт, как только веб-страница полностью загружена.
setInterval () Метод, вызывает функцию или вычисляет выражение через определенные промежутки времени.
OnClick событие, выполнение JavaScript при щелчке по кнопке.
КОД
<!DOCTYPE html>
<html>
<head>
<title>Урок 6. Пример объектно-ориентированного подхода.</title>
<meta charset="utf-8">
</head>
<style>
#main {
position:relative;
margin: 100px auto;
padding: 5px;
width: 660px;
height:360px;
background-color: silver;
border: 5px solid grey;
border-radius:15px;
}
#scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
border: 2px solid black;
border-radius:10px;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 70px;
font: 12pt arial,tahoma,sans-serif;
text-align: center;
}
.left {
left:5px;
}
.right {
right:5px;
}
</style>
<script>
var slider = {
slides:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'],
frame:0, // текущий кадр для отбражения - индекс картинки из массива
set: function(image) { // установка нужного фона слайдеру
document.getElementById("scr").style.backgroundImage = "url("+image+")";
},
init: function() { // запуск слайдера с картинкой с нулевым индексом
this.set(this.slides[this.frame]);
},
left: function() { // крутим на один кадр влево
this.frame--;
if(this.frame < 0) this.frame = this.slides.length-1;
this.set(this.slides[this.frame]);
},
right: function() { // крутим на один кадр вправо
this.frame++;
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() { // запуск слайдера после загрузки документа
slider.init();
setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок
slider.right();
},5000);
};
</script>
<body>
<div id="main">
<button class="left" onclick="slider.left();"><</button>
<div id="scr"></div>
<button class="right" onclick="slider.right();">></button>
</div>
</body>
</html>