js實現無縫輪播圖特效
阿新 • • 發佈:2020-05-06
用原生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="js實現無縫輪播圖特效"> <img class="item" src="../imagejpg/2.jpg" alt="js實現無縫輪播圖特效"> <img class="item" src="../imagejpg/3.jpg" alt="js實現無縫輪播圖特效"> </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,.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,.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,.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; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。