標籤：定時器 操作 length 位置 UNC html amp select 完美
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} ul,li{ list-style: none; } #banner{ width: 800px; height: 400px; margin: 30px auto; position: relative; overflow: hidden; } #banner>ul{ position: absolute; } #banner>ul>li{ float: left; width: 800px; height: 400px; } #banner>#dir>a{ width: 80px; height: 40px; position: absolute; text-align: center; line-height: 40px; text-decoration: none; color: #fff; background: rgba(0,0,0,.5); top: 50%; margin-top: -20px; } #banner>#dir>a:nth-child(2){ right: 0; } #btn{ position: absolute; bottom: 10px; width: 120px; left: 50%; margin-left: -60px; } #btn>a{ float: left; width: 15px; height: 15px; background: #000; border-radius: 50%; margin-left: 10px; } #btn>.active{ background: #c33; } </style></head><body> <div id="banner"> <ul> <li><img src="img/1.png"></li> <li><img src="img/2.png"></li> <li><img src="img/3.png"></li> <li><img src="img/4.png"></li> </ul> <div id="dir"> <a href="##"><</a> <a href="##">></a> </div> <div id="btn"> <a href="##" class="active"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> </div> </div></body></html><script src="../../pool.js"></script><script>var oBanner = document.getElementById("banner");var oUl = document.querySelector("#banner>ul");var aLi = oUl.getElementsByTagName("li")var aDir = document.querySelectorAll("#dir>a");var aBtn = document.querySelectorAll("#btn>a");var iNow = 0;var iWidth = aLi[0].offsetWidth;var li = aLi[0].cloneNode(true);oUl.appendChild(li);oUl.style.width = iWidth * aLi.length+"px";var timer = null;for(var i=0;i<aBtn.length;i++){ aBtn[i].index = i; aBtn[i].onmouseover = function(){ for(var j=0;j<aBtn.length;j++){ aBtn[j].className = "" } this.className = "active"; iNow = this.index; toImg(); }}aDir[0].onclick = function(){ if(iNow == 0){ iNow = aLi.length-2; oUl.style.left = -(aLi.length-1)*aLi[0].offsetWidth+"px"; }else{ iNow--; } toImg();}aDir[1].onclick = function(){ if(iNow == aLi.length-1){ iNow = 1; oUl.style.left = 0; }else{ iNow++; } toImg();}//做輪播圖之前一定要先做一個滑鼠移入停止輪播 移除繼續輪播oBanner.onmouseover = function(){ clearInterval(timer)}oBanner.onmouseout = function(){ autoPlay()}autoPlay()function autoPlay(){ timer = setInterval(function(){ if(iNow == aLi.length-1){ iNow = 1; oUl.style.left = 0; }else{ iNow++; } toImg(); },3000)}//輪播的原理function toImg(){ move(oUl,{left:-iNow*iWidth}) for(var i=0;i<aBtn.length;i++){ aBtn[i].className = ""; } aBtn[iNow==aLi.length-1?0:iNow].className = "active";}</script>/*完美運動架構 */function move(obj,json,fn){ //防止多次點擊 關閉掉上一個定時器 clearInterval(obj.timer); //開啟定時器 obj.timer:防止多個對象搶定時器 obj.timer = setInterval(function(){ //開關門 var bStop = true; //傳入的是一個對象 需要將對象中所有的值進行遍曆 for(var attr in json){ /* 因為offset的局限性太大，如果想要這個方法靈活多用只能用擷取非行間樣式 考慮2點 1、透明度是小數 不能夠直接取整需要先*100在取整 2、因為getStyle()擷取出來的是字串 我們需要將它轉換為數字 */ var iCur = 0; if(attr == "opacity"){ iCur = parseInt(getStyle(obj,attr)*100); }else{ iCur = parseInt(getStyle(obj,attr)); } /* 因為要做緩衝運動，因此需要計算速度 速度是一個不定值 公式： (目標值 - 當前對象的位置) /係數 建議是8 考慮的問題： 電腦處理小數有問題因此需要將小數幹掉，我們要進行向上取整和向下取整 */ //算速度 var speed = (json[attr] - iCur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); /*判斷是否都已經到達終點 只要有一個沒有到達終點就將bStop為false 迴圈完畢以後判斷bstop來決定關閉定時器*/ if(json[attr] !=iCur){ bStop = false; } /* 考慮2部分 1、透明度是不需要加px的因此需要單獨判斷 2、普通的屬性是需要加px的因此需要再次判斷 */ if(attr == "opacity"){ //透明度的相容性 obj.style.opacity = (iCur+speed)/100; obj.style.filter = "alpha(opacity:"+(iCur+speed)+")"; }else{ obj.style[attr] = (iCur+speed)+"px"; } } //當迴圈完畢以後 判斷bStop的狀態來決定是否關閉定時器 if(bStop){ clearInterval(obj.timer); //鏈式操作 fn&&fn(); } },30)}<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style: none; } #banner { width: 800px; height: 400px; margin: 30px auto; position: relative; overflow: hidden; } #banner>ul>li { position: absolute; width: 800px; height: 400px; opacity: 0; } #banner>ul>li:nth-child(1) { opacity: 1 } #banner>#dir>a { width: 80px; height: 40px; position: absolute; text-align: center; line-height: 40px; text-decoration: none; color: #fff; background: rgba(0, 0, 0, .5); top: 50%; margin-top: -20px; } #banner>#dir>a:nth-child(2) { right: 0; } #btn { position: absolute; bottom: 10px; width: 120px; left: 50%; margin-left: -60px; } #btn>a { float: left; width: 15px; height: 15px; background: #000; border-radius: 50%; margin-left: 10px; } #btn>.active { background: #c33; } </style> </head> <body> <div id="banner"> <ul> <li><img src="img/1.png"></li> <li><img src="img/2.png"></li> <li><img src="img/3.png"></li> <li><img src="img/4.png"></li> </ul> <div id="dir"> <a href="##"><</a> <a href="##">></a> </div> <div id="btn"> <a href="##" class="active"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> </div> </div> </body></html><script src="js/pool.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> var aLi = document.querySelectorAll("#banner>ul>li"); //小圓點動態添加 var big_box = document.getElementById("banner"); var btnlist = document.getElementById("btn"); var aUl = document.getElementsByTagName("ul")[0]; var aDir = document.querySelectorAll("#dir>a"); var abtn = document.querySelectorAll("#btn>a"); var iNow = 0; var iNext = 0; var timer = null; aDir[0].onclick = function() { if(iNext == 0) { iNext = aLi.length - 1; } else { iNext--; } toimg(); } aDir[1].onclick = function() { if(iNext == aLi.length - 1) { iNext = 0; } else { iNext++; } toimg(); } big_box.onmousemove = function() { clearInterval(timer); } big_box.onmouseout = function() { autoPlay(); }autoPlay(); function autoPlay() { timer = setInterval(function() { if(iNext == aLi.length - 1) { iNext = 0; } else { iNext++; } toimg(); }, 2000) } function toimg() { move(aLi[iNow], { opacity: 0 }) move(aLi[iNext], { opacity: 100 }) iNow = iNext; for(var i = 0; i < abtn.length; i++) { abtn[i].className = ""; } abtn[iNext].className = "active"; } //下面的小圓點 for(var i = 0; i < abtn.length; i++) { abtn[i].index = i; abtn[i].onmouseover = function() { for(var j = 0; j < abtn.length; j++) { abtn[j].className = ""; } this.className = "active"; //iNow = iNext; iNext =this.index; console.log(iNow); console.log(iNext); toimg(); } }</script>js無縫輪播 和淡入淡出輪播
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
