console
<style type="text/css">
*{margin: 0px; padding: 0px; list-style: none; text-decoration: none; color: #333;}
.slide-item p{position: absolute;left: 0px; top: 0px; color: #fff; }
.arrow{position: absolute;width: 30px; height: 80px;top: 50%; margin-top: -40px; background: rgba(0,0,0,0.5); }
.prev{left: 30px;}
.next{right: 30px;}
.pagination{position: absolute;width: 100%; text-align: center; bottom: 30px;}
.pagination ul{display: inline-block;}
.pagination li{ width: 10px; height: 10px; line-height: 10px; border-radius: 50%;background: #fff; float: left; margin-left: 10px;}
.pagination li.active-point{background: #f10;}
</style>
<div class="slide" id="slide">
<ul class="slide-group">
<li class="slide-item red"><a href="">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3881048221,3833583369&fm=26&gp=0.jpg"
<p>这是第一张</p>
</a></li>
<li class="slide-item blue"><a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1486271666,307393547&fm=26&gp=0.jpg" alt="">
<p>这是第二张</p>
</a></li>
<li class="slide-item pink"><a href="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3731741439,4057676812&fm=26&gp=0.jpg" alt="">
<p>这是第三张</p>
</a></li>
<li class="slide-item orange"><a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2350817201,1137116540&fm=26&gp=0.jpg" alt="">
<p>这是第四张</p>
</a></li>
</ul>
<div class="arrow prev" id="btn-prev"></div>
<div class="arrow next" id="btn-next"></div>
<div class="pagination" id="pagination"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function Slide(options) {
this.wrapper = $(options.elm);
this.slideGroup = this.wrapper.find('ul');
this.slideItems = this.wrapper.find('li');
this.pagination = $(options.pagination);
this.width = options.width;
this.height = options.height;
this.length = this.slideItems.length;
this.idx = 0;
this.lock = false;
this.timer = null;
this.duration = options.duration || 3000;
this.initLeft = 0;
this.init(options)
}
Slide.prototype.init = function(options) {
var that = this;
if(options.loop) this.clone(options.loop);
if(options.pagination) this.creatElm(options.pagination);
this.wrapper.css({width:options.width || 600,height:options.height || 300,overflow:'hidden',position:'relative'});
this.slideGroup.css({width:this.slideGroup.find('li').length * this.width,height:this.height,position:'absolute',left:-this.initLeft});
this.slideGroup.find('li').css({width:this.width,height:this.height,float:'left',position:'relative'})
this.slideGroup.find('li img').css({width:'100%',height:'100%' ,backgroundSize:'cover'});
that.activeElm(that.idx);
this.bindEvent(options)
this.timer = setInterval(function(){
that.toNext();
},this.duration);
}
Slide.prototype.clone = function(mode){
if(mode !== '' && mode === true){
this.slideItems.eq(0).clone().appendTo(this.slideGroup)
this.slideItems.eq(this.length - 1).clone().prependTo(this.slideGroup);
this.initLeft = this.width;
}else{
this.slideItems.eq(0).clone().appendTo(this.slideGroup)
}
}
Slide.prototype.creatElm = function(target){
var ul = document.createElement('ul');
$(ul).appendTo($(target));
for(var i = 0; i < this.slideItems.length; i ++){
var li = document.createElement('li');
if(i === 0 ) $(li).addClass('active-point');
$(li).appendTo($(ul));
}
}
Slide.prototype.toPrev = function(){
if(this.lock) return false;
this.idx--;
this.move();
}
Slide.prototype.toNext = function(){
if(this.lock) return false;
this.idx++;
this.move();
}
Slide.prototype.move = function(){
var that = this;
this.lock = true
this.slideGroup.animate({left:-(this.idx * this.width + this.initLeft),top:0},'swing',function(){
that.lock = false;
that.activeElm(that.idx);
if(that.idx == that.slideItems.length){
that.idx = 0;
that.activeElm(that.idx);
that.slideGroup.css({left:-that.initLeft});
}
if(that.idx == -1){
that.idx = that.slideItems.length-1;
that.slideGroup.css({left:-that.initLeft*(that.slideItems.length)});
}
})
}
Slide.prototype.activeElm = function(curIdx){
this.pagination.find('li').removeClass('active-point').eq(curIdx).addClass('active-point');
this.slideItems.removeClass('active-item').eq(curIdx).addClass('active-item')
}
Slide.prototype.bindEvent = function(options){
var that = this;
if(options.arrow.prev){
$(options.arrow.prev).click(function(){
clearInterval(that.timer);
that.timer = null;
that.toPrev();
that.timer = setInterval(function(){
that.toNext();
},that.duration)
})
}
if(options.arrow.next){
$(options.arrow.next).click(function(){
clearInterval(that.timer);
that.timer = null;
that.toNext();
that.timer = setInterval(function(){
that.toNext();
},that.duration)
})
}
if(options.pagination){
$(options.pagination).on('click','li',function(e){
console.log(that.idx, $(e.target).index());
var tarIdx = $(e.target).index()
that.idx = tarIdx;
clearInterval(that.timer);
that.timer = null;
that.move();
that.timer = setInterval(function(){
that.toNext();
},that.duration)
})
}
this.wrapper.on('mouseover',function(){
clearInterval(that.timer);
that.timer = null;
})
this.wrapper.on('mouseleave',function(){
that.timer = setInterval(function(){
that.toNext();
},that.duration)
})
}
let slide = new Slide({
elm:'#slide',
width:820,
height:300,
arrow:{
prev:'#btn-prev',
next:'#btn-next'
},
pagination:'#pagination',
loop:true,
actived:function(){},
befored:function(){}
})
</script>