JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="ru">
<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: 120px;
height: 120px;
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:['http://www.antilopagold.su/images/stories/virtuemart/product/resized/94397.jpg','http://www.antilopagold.su/images/stories/virtuemart/product/resized/93854.jpg','http://www.antilopagold.su/images/stories/virtuemart/product/resized/93822.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]);
}
};
function move() { // ставим пятисекундный интервал для перелистывания картинок
slider.right();
window.myTimer = setTimeout(move,5000);
}
window.onload = function() { // запуск слайдера после загрузки документа
slider.init();
...