js实现无缝轮播图特效

2023-07-25 20:25:07 325

varconfig={ imgWidth:380,//图片尺寸 dotWidth:8,//小圆点尺寸 doms:{ divImgs:document.querySelector('.imgs'), divDots:document.querySelector('.circle'), divDirection:document.querySelector('.direction'), divContainer:document.querySelector('.container') }, curIndex:0,//实际图片索引，0~imgNumber-1 timer:{ duration:16,//运动间隔时间 total:1000,//总时间 id:null//计时器编号 } } //图片的数量 config.imgNumber=config.doms.divImgs.children.length; //初始化元素尺寸 config.imgsWidth=(config.imgNumber+2)*config.imgWidth; config.dotsWidth=(config.imgNumber+2)*config.dotWidth; //初始化 functioninti(){ intiWidth(); intiCount(); intiElement(); intiPosition(); functionintiWidth(){ config.doms.divImgs.style.width=config.imgsWidth+'px'; config.doms.divDots.style.width=config.dotsWidth+'px'; } functionintiCount(){ for(vari=0;imarginLeft){ distance=newLeft-marginLeft; }else{ distance=totalWidth-Math.abs(newLeft-marginLeft); } } //每次改变的距离 vareverDistence=distance/number; //逐步改变marginLeft functionanimateSwitch(){ clearAnimate(); config.timer.id=setInterval(function(){ marginLeft+=everDistence; if(directions==='left'&&Math.abs(marginLeft)>totalWidth){ marginLeft+=totalWidth; } elseif(directions==='right'&&Math.abs(marginLeft)config.imgNumber-1){ index=0; } switchTo(index,'left'); } //小圆点点击事件 config.doms.divDots.onclick=function(e){ if(e.target.tagName==='P'){ varindex=Array.from(this.children).indexOf(e.target); switchTo(index,index>config.curIndex?'left':'right') } }

.container{ width:380px; height:250px; border:1pxsolid; margin:0auto; position:relative; overflow:hidden; } .container.imgs{ } .container.imgs.item{ width:380px; height:250px; display:block; float:left; top:0; } .container.circle{ position:absolute; left:0; right:0; margin:0auto; background:rgba(0,0,0,.3); bottom:8px; border-radius:5px; } .container.circlep{ width:8px; height:8px; background:#fff; border-radius:50%; float:left; margin:2px; cursor:pointer; } .container.circlep.select{ background:#f40; } .container.direction.item{ background:rgba(0,0,0,.4); position:absolute; top:120px; width:20px; height:26px; padding:2px; box-sizing:border-box; display:none; cursor:pointer; } .container.direction.item:hover{ background:rgba(0,0,0,.5); } .container:hover.direction.item{ display:block; } .container.direction.left{ left:0; border-radius:015px15px0; } .container.direction.right{ right:0; padding-left:6px; border-radius:15px0015px; }

js实现无缝轮播图特效

热门推荐

随机推荐