<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>pl封装滚动轮播图插件</title>
</head>
<style>
*{margin: 0px ;padding: 0px;}
.content{
width: 700px;height: 350px;
margin: 0px auto;margin-top: 100px;
position: relative;
overflow: hidden;
}
#ulBox{
width: 1000%;
height: 350px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
li{
list-style: none;
}
#ulBox>li{
float: left;
width: 700px;
height: 350px;
}
#ulBox>li>img {
width: 100%;
height: 100%;
}
#liItem{
float: left;
height: 20px;
position: absolute;
left: 50%;
top: 90%;
transform: translate(-50%,-90%);
z-index: 999;
}
#liItem>li{
margin-right: 10px;
border: 1px solid white;
border-radius: 50%;
width: 12px;
height: 12px;
float: left;
}
.active{
background: white;
}
.click{
width: 40px;
height: 60px;
position: absolute;
top: 50%;
transform: translate(0%,-50%);
font-size: 20px;
line-height: 60px;
text-align: center;
opacity: 0.3;
cursor: pointer;
}
.click:hover{
background: pink;
opacity: 0.5;
}
.left{
left: 0%;
z-index: 9999;
}
.right{
right: 0%;
z-index: 9999;
}
</style>
<body>
<div class="content">
<ul id="ulBox">
<li><img src="http://img14.360buyimg.com/babel/s590x470_jfs/t1/76246/24/10598/60236/5d80b1ebE96f069cd/822f888096ff1f43.jpg.webp"></li>
<li><img src="http://img12.360buyimg.com/pop/s590x470_jfs/t1/49477/30/9074/95124/5d6735a3E9e2ad774/0daeefab1a1adffc.jpg.webp"></li>
<li><img src="http://img14.360buyimg.com/da/s590x470_jfs/t1/68950/35/5856/136857/5d403459Ee7e0b047/5ed44ffdb01f0ce6.jpg.webp"></li>
</ul>
<ul id="liItem">
</ul>
<div class="click left"><</div>
<div class=" click right">></div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.js"></script>
<script>
$.fn.extend({ //给jquery实例上添加方法
swriper:function(){
//var self=this;
var ulBox=this.children('#ulBox'); //获取img的容器
var liItem=this.children('#liItem');//获取对应小圆点的li容器
var maxlength=ulBox.children().length;//保存img容器中li的长度
var maxwidth=parseInt(this.css('width'));//获取容器的宽度值
var leftclick=this.children('.left');//获取左边点击按钮
var rightclick=this.children('.right');//获取右边点击按钮
var indexs=0; //声明一个全局indexs值
var timer=null; //声明一个全局的timer用来存储定时器
var obj={ //声明的一个对象
init(){ //声明一个init函数,函数集中式执行,
this.createulBox(maxlength); //执行创建节点标签和添加图片前后克隆节点
this.ulBoxclick(liItem); //给小圆点的li容器添加事件委托
this.lfclick(leftclick); //左按钮点击事件
this.rgclick(rightclick); //右按钮点击事件
this.showImg(indexs); //图片默认显示第二张 indexs=0 ,showImg()中自增了一所以是第二张
this.aotuplay(); //开启定时器
//console.log(maxwidth)
},
createulBox(max){ //图片添加和小圆点添加
var $first=ulBox.children().first();//克隆添加前后图片
var $last=ulBox.children().last();
ulBox.append($first.clone());
$first.before($last.clone());
for(var i=0;i<max/*传递的是添加图片之前保存的值*/;i++){ //小圆点添加
liItem.append('<li></li>')
}
},
ulBoxclick(dom){ //小圆点容器点击委托事件
var self=this;
dom.on('click','li',function(){
var index=$(this).index();
clearInterval(timer);
self.aotuplay();
self.showImg(index);
})
},
showImg(index){ //根据传入的参数进行判断来改变图片的定位
console.log(index)
if(index<0){ //判断图片是否小于0
indexs=maxlength-1; //条件成立容器定位跳到最后一张图片的位置
ulBox.css('left',-(indexs+2)*(maxwidth));
}else if(index>maxlength-1){ //条件成立跳到第一张图片的位置
indexs=0;
ulBox.css('left',0)
}else{
indexs=index
};
//console.log(indexs)
for(var i=0;i<maxlength;i++){ //清空所有小圆点的active属性
liItem.children().eq(i).removeClass('active');
}
liItem.children().eq(indexs).addClass('active');//给当前传入参数对应的小圆点添加active属性
ulBox.stop().animate({'left':-(indexs+1)*maxwidth},500) //过度动画
},
lfclick(dom){ //鼠标左击事件
var self=this;
dom.on('click',function(){
clearInterval(timer);
self.aotuplay();
indexs--;
self.showImg(indexs);
})
},
rgclick(dom){ //鼠标右击事件
var self=this;
dom.on('click',function(){
clearInterval(timer);
self.aotuplay();
indexs++;
self.showImg(indexs);
});
},
aotuplay(){ //自动轮播
clearInterval(timer);
timer=setInterval(()=>{
indexs++;
this.showImg(indexs);
},2000)
}
}
obj.init(); //执行函数
}
})
</script>
<script>
$('.content').swriper() //调用$中的方法
</script>
</html>
