js实现无缝轮播图特效
程序员文章站
2022-06-07 23:13:05
用原生js实现无缝轮播图,供大家参考,具体内容如下index.js:var config = { imgwidth:380,//图片尺寸 dotwidth:8,//小圆点尺寸 doms:{ divim...
用原生js实现无缝轮播图,供大家参考,具体内容如下
index.js:
var config = { 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; //初始化 function inti(){ intiwidth(); inticount(); intielement(); intiposition(); function intiwidth(){ config.doms.divimgs.style.width = config.imgswidth + 'px'; config.doms.divdots.style.width = config.dotswidth + 'px'; } function inticount(){ for(var i = 0; i < config.imgnumber; i ++){ var p = document.createelement('p'); config.doms.divdots.appendchild(p); } } function intielement(){ var first = config.doms.divimgs.children[0],last = config.doms.divimgs.children[config.imgnumber-1]; var newimg = first.clonenode(true);//深度克隆 config.doms.divimgs.appendchild(newimg); newimg = last.clonenode(true); config.doms.divimgs.insertbefore(newimg,first); } function intiposition(){ var left = (-config.curindex-1)*config.imgwidth; config.doms.divimgs.style.marginleft = left + 'px'; setdots();//小圆点的激活状态位置设置 } } inti(); //小圆点的激活状态位置设置 function setdots(){ for(var i = 0; i < config.doms.divdots.children.length; i++){ var dot = config.doms.divdots.children[i]; if(i === config.curindex){ dot.classname = 'select'; }else{ dot.classname = ''; } } } /* 图片切换 index: 图片索引 directions: 图片切换方向(left,right) */ function switchto(index,directions){ if(index === config.curindex){ return; } if(!directions){ directions = 'right';//默认状态下向右切换图片 } //最终的显示图片; 图片容器的marginleft var newleft = (-index-1)*config.imgwidth; animateswitch(); //config.doms.divimgs.style.marginleft = newleft + 'px'; //小圆点的激活状态位置设置 config.curindex = index; setdots(); //一张图片的总运动次数 var number = math.ceil(config.timer.total/config.timer.duration); //当前运动次数 var curnumber = 0; var distance,//总运动距离 totalwidth = config.imgnumber*config.imgwidth, marginleft = parsefloat(getcomputedstyle(config.doms.divimgs).marginleft); if(directions === 'left'){ if(newleft < marginleft){ distance = newleft - marginleft; }else{ distance = -(totalwidth-math.abs(newleft - marginleft)); } } if(directions === 'right'){ if(newleft > marginleft){ distance = newleft - marginleft; }else{ distance = totalwidth-math.abs(newleft - marginleft); } } //每次改变的距离 var everdistence = distance/number; //逐步改变marginleft function animateswitch(){ clearanimate(); config.timer.id = setinterval(function(){ marginleft += everdistence; if(directions === 'left' && math.abs(marginleft) > totalwidth){ marginleft += totalwidth; } else if(directions === 'right' && math.abs(marginleft) < config.imgwidth){ marginleft -= totalwidth; } config.doms.divimgs.style.marginleft = marginleft + 'px'; curnumber ++; if(curnumber === number){ clearanimate(); } },config.timer.duration); } //清空计时器 function clearanimate(){ clearinterval(config.timer.id); config.timer.id = null; } } //默认情况下自动向右轮播图片 var timer = setinterval(function(){ toright(); },2000); config.doms.divcontainer.onmouseleave = function() { timer = setinterval(function(){ toright(); },2000); } //鼠标移出则清空定时器 config.doms.divcontainer.onmouseover = function() { clearinterval(timer); } //左右点击事件 config.doms.divdirection.onclick = function(e){ clearinterval(timer); if(e.target.classlist.contains('left')){ toleft(); } if(e.target.classlist.contains('right')){ toright(); } } function toleft(){ var index = config.curindex - 1; if(index < 0){ index = config.imgnumber - 1; } switchto(index,'right'); } function toright(){ var index = config.curindex + 1; if(index > config.imgnumber - 1){ index = 0; } switchto(index,'left'); } //小圆点点击事件 config.doms.divdots.onclick = function(e){ if(e.target.tagname === 'p'){ var index = array.from(this.children).indexof(e.target); switchto(index,index > config.curindex? 'left' : 'right') } }
index.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>无缝轮播图</title> <link rel="stylesheet" href="index.css" rel="external nofollow" > </head> <body> <div class="container"> <div class="imgs"> <img class="item" src="../imagejpg/1.jpg" alt=""> <img class="item" src="../imagejpg/2.jpg" alt=""> <img class="item" src="../imagejpg/3.jpg" alt=""> </div> <div class="circle"> <!-- <p></p> <p class="select"></p> <p></p> <p></p> <p></p> --> </div> <div class="direction"> <div class="item left"><</div> <div class="item right">></div> </div> </div> <script src="./index.js"> </script> </body> </html>
index.css:
.container{ width:380px; height:250px; border:1px solid; margin:0 auto; 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:0 auto; background:rgba(0,0,0,.3); bottom:8px; border-radius:5px; } .container .circle p{ width:8px; height:8px; background:#fff; border-radius:50%; float:left; margin:2px; cursor:pointer; } .container .circle p.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:0 15px 15px 0; } .container .direction .right{ right:0; padding-left:6px; border-radius:15px 0 0 15px; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。