<!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{ 700px;height: 350px; margin: 0px auto;margin-top: 100px; position: relative; overflow: hidden; } #ulBox{ 1000%; height: 350px; position: absolute; left: 0; top: 0; overflow: hidden; } li{ list-style: none; } #ulBox>li{ float: left; 700px; height: 350px; } #ulBox>li>img { 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%; 12px; height: 12px; float: left; } .active{ background: white; } .click{ 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>