Простой слайдер

Файл index.html

<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” type=”text/css” href=”style-s.css” />
<script src=”http://4632.ru/slider/js.js” type=”text/javascript”></script>
<title>Слайд-шоу HTML CSS</title>
</head>
<body>

<div class=”slider square” id=”main-slider”><!– square – это сдвиг влево и вверх –>
<div class=”slider-wrapper”>
<img src=”http://4632.ru/slider/images_01.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_03.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_04.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_05.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_06.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_07.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_08.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_09.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_10.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_11.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_12.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_13.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_14.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_15.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_16.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
<img src=”http://4632.ru/slider/images_17.jpg” alt=”” width=”401″ height=”290″ class=”slide” />
</div>
</div>

</body>
</html>

 

Файл style-s.css

html,body {
margin: 0;
padding: 0;
}
.slider {
width: 401px;
margin: 2em auto;

}

.slider-wrapper {
width: 100%;
height: 290px;
position: relative;
}

.slide {
float: left;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 3s linear;
}

.slider-wrapper > .slide:first-child {
opacity: 1;
}

.square {
position: absolute;
top: -10px;
left: -20px;
}

 

Файл js.js

(function() {

function Slideshow( element ) {
this.el = document.querySelector( element );
this.init();
}

Slideshow.prototype = {
init: function() {
this.wrapper = this.el.querySelector( “.slider-wrapper” );
this.slides = this.el.querySelectorAll( “.slide” );
this.previous = this.el.querySelector( “.slider-previous” );
this.next = this.el.querySelector( “.slider-next” );
this.index = 0;
this.total = this.slides.length;
this.timer = null;

this.action();
this.stopStart();
},
_slideTo: function( slide ) {
var currentSlide = this.slides[slide];
currentSlide.style.opacity = 1;

for( var i = 0; i < this.slides.length; i++ ) {
var slide = this.slides[i];
if( slide !== currentSlide ) {
slide.style.opacity = 0;
}
}
},
action: function() {
var self = this;
self.timer = setInterval(function() {
self.index++;
if( self.index == self.slides.length ) {
self.index = 0;
}
self._slideTo( self.index );

}, 3000);
},
stopStart: function() {
var self = this;
self.el.addEventListener( “mouseover”, function() {
clearInterval( self.timer );
self.timer = null;

}, false);
self.el.addEventListener( “mouseout”, function() {
self.action();

}, false);
}

};

document.addEventListener( “DOMContentLoaded”, function() {

var slider = new Slideshow( “#main-slider” );

});

})();


Пример слайдера

Архив примера слайдера

If you found an error, highlight it and press Shift + Enter or click here to inform us.

Author: master

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

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