console
(function() {
var vendors = ['ms', 'moz', 'webkit', 'o'],
lastTime = 0;
for (var i = 0; i < vendors.length; i++) {
window.requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'] || window[vendors[i] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var timeid = setTimeout(function() {
callback();
},
timeToCall);
lastTime = currTime + timeToCall;
return timeid;
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(timeid) {
clearTimeout(timeid);
}
}
})();
function Slider(option) {
if (!option || !option.container) {
return;
}
var _this = this;
_this.option = {
container: null,
autoplay: false,
nav: false,
arrows: null,
duration: 1000,
accelerate: true
}
Object.assign(_this.option, option);
var init = function() {
_this.context = _this.option.container;
_this.slideWidth = _this.context.clientWidth;
_this.slideHeight = _this.context.clientHeight;
_this.ul = _this.context.getElementsByClassName('slider-ul')[0];
_this.li = _this.context.getElementsByClassName('slider-li');
_this.count = _this.li.length;
_this.wrapwidth = _this.slideWidth * _this.count;
_this.timeid = null;
_this.move = false;
_this.speed = _this.slideWidth / (_this.option.duration / 1000 * 60);
_this.curr = 0;
_this.ul.style.width = _this.wrapwidth + 'px';
for (var i = 0; i < _this.count; i++) {
_this.li[i].style.width = _this.slideWidth + 'px';
}
if (_this.option.autoplay) {
setTimeout(function() {
var loop = function() {
_this.next();
_this.timeid = setTimeout(loop, 5000);
}
loop();
},
1000);
}
if (_this.option.nav && _this.option.nav.constructor == Array) {
_this.option.nav[0].addEventListener('click', function() {
_this.prev();
});
_this.option.nav[1].addEventListener('click', function() {
_this.next();
});
}
if (_this.option.arrows) {
_this.arrows = document.createElement('nav');
_this.arrows.className = 'slider-nav';
var ol = document.createElement('ol');
for (var i = 0; i < _this.count; i++) {
ol.innerHTML += '<li data-index="' + i + '"></li>';
}
_this.arrows.innerHTML = ol.outerHTML;
_this.context.appendChild(_this.arrows);
_this.arrows.getElementsByTagName('li')[_this.curr].classList.add('active');
_this.arrows.addEventListener('click', function(e) {
var el = e.target;
if (el.nodeName.toLowerCase() == 'li') {
var index = el.dataset.index;
_this.go(index);
}
});
}
_this.context.addEventListener('mouseenter', function(e) {
if (_this.option.autoplay && _this.timeid) {
clearTimeout(_this.timeid);
_this.timeid = null;
}
});
_this.context.addEventListener('mouseleave', function(e) {
if (_this.option.autoplay && !_this.timeid) {
setTimeout(function() {
var loop = function() {
_this.next();
_this.timeid = setTimeout(loop, 5000);
}
loop();
},
1000);
}
});
}
init();
}
Slider.prototype = {
prev: function() {
var _this = this;
if (_this.move) {
return;
}
_this.move = true;
_this.ul.style.marginLeft = -_this.slideWidth + 'px';
_this.ul.insertBefore(_this.li[_this.count - 1], _this.li[0]); (function() {
var marginLeft = _this.ul.offsetLeft,
timeid;
if (marginLeft >= 0) {
cancelAnimationFrame(timeid);
var index = (_this.curr - 1 + _this.count) % _this.count;
_this.update(index);
} else {
_this.ul.style.marginLeft = marginLeft + _this.speed + 'px';
timeid = requestAnimationFrame(arguments.callee);
}
})();
},
next: function() {
var _this = this;
if (_this.move) {
return;
}
_this.move = true; (function() {
var marginLeft = _this.ul.offsetLeft,
timeid;
if (marginLeft <= -_this.slideWidth) {
cancelAnimationFrame(timeid);
_this.ul.appendChild(_this.li[0]);
var index = (_this.curr + 1) % _this.count;
_this.update(index);
} else {
_this.ul.style.marginLeft = marginLeft - _this.speed + 'px';
timeid = requestAnimationFrame(arguments.callee);
}
})();
},
go: function(index) {
var _this = this;
if (_this.move) {
return;
}
_this.move = true;
var diff = index - _this.curr;
if (diff < 0) {
_this.ul.style.marginLeft = _this.slideWidth * diff + 'px';
for (var i = 0; i < Math.abs(diff); i++) {
_this.ul.insertBefore(_this.li[_this.count - 1], _this.li[0]);
} (function() {
var marginLeft = _this.ul.offsetLeft,
timeid;
if (marginLeft >= 0) {
cancelAnimationFrame(timeid);
_this.update(index);
} else {
_this.ul.style.marginLeft = marginLeft + _this.speed + 'px';
timeid = requestAnimationFrame(arguments.callee);
}
})();
} else {
(function() {
var marginLeft = _this.ul.offsetLeft,
timeid;
if (marginLeft <= -_this.slideWidth * diff) {
cancelAnimationFrame(timeid);
for (var i = 0; i < diff; i++) {
_this.ul.appendChild(_this.li[0]);
}
_this.update(index);
} else {
_this.ul.style.marginLeft = marginLeft - _this.speed + 'px';
timeid = requestAnimationFrame(arguments.callee);
}
})();
}
},
update: function(curr) {
var _this = this;
_this.ul.style.marginLeft = '0px';
_this.curr = curr - 0;
_this.move = false;
for (var i = 0; i < _this.count; i++) {
var li = _this.arrows.getElementsByTagName('li')[i];
var el = _this.arrows.getElementsByTagName('li')[_this.curr];
if (li == el) {
li.classList.add('active');
} else {
li.classList.remove('active');
}
}
}
}
var slider = new Slider({
container: document.getElementsByClassName('slider-wrap')[0],
autoplay: true,
nav: [document.getElementsByClassName('btn-prev')[0], document.getElementsByClassName('btn-next')[0]],
arrows: true,
duration: 500,
accelerate: true
});
<div class='slider-wrap'>
<ul class='slider-ul'>
<li class='slider-li'>
<img src='http://fitdesign.tencent.com/wp-content/uploads/2017/05/2017061508203860.jpg'
title='0' />
</li>
<li class='slider-li'>
<img src='http://fitdesign.tencent.com/wp-content/uploads/2017/05/2017061508215615.jpg'
title='1' />
</li>
<li class='slider-li'>
<img src='http://fitdesign.tencent.com/wp-content/uploads/2017/05/2017061508155929.jpg'
title='2' />
</li>
<li class='slider-li'>
<img src='http://fitdesign.tencent.com/wp-content/uploads/2017/05/2017061508215615.jpg'
title='3' />
</li>
</ul>
<div class='slider-btn'>
<a class='btn-prev'>
</a>
<a class='btn-next'>
</a>
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.slider-wrap {
position: relative;
width: 480px;
height: 240px;
margin: 0 auto;
overflow: hidden;
}
.slider-ul {
height: 100%;
}
.slider-li {
float: left;
height: 100%;
}
.slider-li:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
content: '';
opacity: 0;
transition: opacity .3s ease 0s;
}
.slider-wrap:hover .slider-li:after {
opacity: 0.2;
}
.slider-li img {
width: 100%;
vertical-align: middle;
}
.slider-btn a {
position: absolute;
top: 97px;
width: 46px;
height: 46px;
cursor: pointer;
}
.slider-btn .btn-prev {
left: 20px;
background-image: url('http://fitdesign.tencent.com/wp-content/themes/avril/img/slider-pre.png');
}
.slider-btn .btn-next {
right: 20px;
background-image: url('http://fitdesign.tencent.com/wp-content/themes/avril/img/slider-next.png');
}
.slider-nav {
position: absolute;
bottom: 24px;
left: 0;
right: 0;
text-align: center;
font-size: 0;
}
.slider-nav li {
display: inline-block;
width: 8px;
height: 9px;
border: 1px solid #fff;
overflow: hidden;
border-radius: 50%;
margin: 0 9px;
opacity: .8;
cursor: pointer;
}
.slider-nav li.active {
background-color: #fff;
}