js無縫輪播 和淡入淡出輪播
阿新 • • 發佈：2018-08-25
java true bottom lang 操作 rgba gets 定時 box
<!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無縫輪播 和淡入淡出輪播