轮播封装(初步简单封装)

来源：互联网发布：淘宝手机客服端下拉词编辑：程序博客网时间：2024/06/14 14:28

html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#banner{width: 500px;overflow: hidden;}#imgs{position: relative;width: 3000px;}img{width: 500px;}#ids{position: relative;}.ids_item{width: 10px;height: 10px;border-radius: 50%;border: 4px solid red;float: left;margin-right: 20px;cursor: pointer;}</style></head><body><div id="banner"><div id="imgs"><img src="img/jj.JPG" alt=""><img src="img/jj1.JPG" alt=""><img src="img/1.png" alt=""><img src="img/2.png" alt=""><img src="img/jj.JPG" alt=""></div><div id="ids"><div class="ids_item"></div><div class="ids_item"></div><div class="ids_item"></div><div class="ids_item"></div></ul></div><script src="js/jquery.min.js"></script><script src="js/banner.js"></script><script>//图片轮播初步封装//注：需要自己写css样式//第一个参数：id值 注：图片外面的div//第二个参数：id值 注：小圆点//第三个参数：每张图片暂留时间//第四个参数：动画切换所需时间//第五个参数：图片个数(不算最后一张图片，最后一张图片与第一张图片重复)init('imgs','ids',2000,1000,500,4);</script></body></html>

注：需要引入JQ

banner.js:

var moved=0;var WAIT=2000;var DURA=1000;var $Imgs="";var $ids="";var imgWidth=500;var imgCount=2;var timer=null;function init(id1,id2,wait,dura,wid,count){$Imgs=$('#'+id1);$ids=$('#'+id2);WAIT=wait;DURA=dura;imgWidth=wid;imgCount=count;$ids.on("mouseover","div",function(){var $li=$(this);var i=$li.index();moved=i;clearInterval(timer);timer=null;$Imgs.animate({left:-imgWidth*moved},DURA,()=>{});});$ids.on("mouseout","div",function(){timer=setInterval(move,WAIT);});}function move(dir=1){moved+=dir;$Imgs.animate({left:-imgWidth*moved},DURA,()=>{if(moved%imgCount==0){moved=0;$Imgs.css("left",0);}})}var timer=setInterval(move,WAIT);$("#imgs").hover(()=>{clearInterval(timer),timer=null;},()=>{timer=setInterval(move,WAIT);});

阅读全文

0 0