原生JS實現呼吸輪播圖
阿新 • • 發佈:2021-10-20
今天給大家分享一個用原生實現的呼吸輪播圖,效果如下:
以下是程式碼實現,歡迎大家複製貼上。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生JS實現呼吸輪播圖</title> <style> ul { margin: 0; padding-left: 0; } li { list-style: none; } img { border: none; } #main { width: 280px; height: 330px; overflow: hidden; position: relative; margin: 20px auto 0 auto; } #main ul { position: absolute; left: 0; } #main ul li { width: 280px; height: 330px; float: left; position: absolute; filter: alpha(opacity=0); opacity: 0; } #btn { line-height: 14px; text-align: center; background: #eeeeee; width: 280px; margin: 10px auto 0 auto; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } #btn a { display: inline-block; width: 14px; height: 14px; text-decoration: none; line-height: 12px; text-align: center; border-radius: 7px; }http://www.cppcns.com#btn a.index { background-color: #ccc; } #btn a.active { background-color: red; } </style> <script type="text/" src="js/move.js"></script> <script> window.onmbjoroVcYiload = function () { var oMain = document.getElementById('main'); var oUl = oMain.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var oBtn = document.getElementById('btn'); var aA = oBtn.getElementsByTagName('a'); var iNow = 1; var iNow2 = 1; var bBtn = true; var num = 3; var timer = null; oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px'; aA[0].onclick = function () { if (bBtn) { clearInterval(timer); timer = setInterval(autoPlay,3000); for (var i = 0; i < aLi.length; i++) { aLi[i].style.position = 'relative'; aLi[i].style.filter = 'alpha(opacity=100)'; aLi[i].style.opacity = 1; } oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px'; if (iNow == 1) { iNow = aLi.length; aLi[aLi.length - 1].style.position = 'relative'; aLi[aLi.length - 1].style.left = -aLi.length * aLi[0].offsetWidth + 'px'; } else { iNow--; } iNow2--; toRun(); bBtn = false; } }; aA[aA.length - 1].onclick = function () { if (bBtn) { clearInterval(timer); timer = setInterval(autoPlay,3000); for (var i = 0; i < aLi.length; i++) { aLi[i].style.position = 'relative'; aLi[i].style.filter = 'alpha(opacity=100)'; aLi[i].style.opacity = 1; } oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px'; if (iNow == aLi.length) { iNow = 1; aLi[0].style.position = 'relative'; aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px'; } else { iNow++; } iNow2++; toRun(); bBtn = false; } }; for (var i = 1; i < aA.length - 1; i++) { aA[i].index = i; aA[i].onclick = function () { clearInterval(timer); timer = setInterval(autoPlay,3000); iNow = this.index; iNow2 = this.index; toShow(); }; }; function toRun() { for (var i = 1; i < aA.length - 1; i++) { aA[i].className = 'index'; } aA[iNow].className = 'active'; startMove(oUl,{ left: -(iNow2 - 1) * aLi[0].offsetWidth },function () { if (iNow == 1) { aLi[0].style.position = 'relative'; aLi[0].style.left = 0; oUl.style.left = 0; iNow2 = 1; } else if (iNow == aLi.length) { aLi[aLi.length - 1].style.position = 'relative';aLi[aLi.length - 1].style.left = 0; www.cppcns.com oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px'; iNow2 = aLi.length; } for (var i = 0; i < aLi.length; i++) { aLi[i].style.position = 'absolute'; aLi[i].style.filter = 'alpha(opacity=0)'; aLi[i].style.opacity = 0; } oUl.style.left = 0; aLi[iNow2 - 1].style.zIndex = num++; aLi[iNow2 - 1].style.filter = 'alpha(opacity=100)'; aLi[iNow2 - 1].style.opacity = 1; bBtn = true; }); }; function toShow() { for (var i = 1; i < aA.length - 1; i++) { aA[i].className = 'index'; } for (var i = 0; i < aLi.length; i++) { startMove(aLi[i],{ opacity: 0 }); } aA[iNow].className = 'active'; startMove(aLi[iNow - 1],{ opacity: 100 },function () { aLi[iNow - 1].style.zIndex = num++; }); } timer = setInterval(autoPlay,3000); function autoPlay() { if (iNow == aLi.length) { iNow = 1; iNow2 = 1; } else { iNow++; iNow2++; } toShow(); } }; </script> www.cppcns.com</head> <body> <div id="main"> <ul> <li style="z-index:2; filter:alpha(opacity=100); opacity:1;"> <a> <img src="images/0.jpg" /> </a> </li> <li> <a> <img src="images/1.jpg" /> </a> </li> <li> <a> <img src="images/2.jpg" /> </a> </li> <li> <a> <img src="images/3.jpg" /> </a> </li> </ul> </div> <div id="btn"> <a class="prev" href="script:;"> <</a> <a class="active" href="javascript:;"> </a> <a class="index" href="javascript:;"></a> <a class="index" href="javascript:;"></a> <a class="index" href="javascript:;"></a> <a class="next" href="javascript:;">></a> </div> </body> </html>
以下是上面程式碼中引入的最重要的運動函式 move.js的程式碼:
function startMove(obj,json,fnEnd) { clearInterval(obj.timer); obj.timer = setInterval(function () { doMove(obj,fnEnd); },30); } function doMove(obj,fnEnd) { var iCur = 0; var attr = null; var bStop = true; for (attr in json) { if (attr == 'opacity') { if (parseInt(100 * getStyle(obj,attr)) == 0) { iCur = parseInt(100 * getStyle(obj,attr)); } else { iCur = parseInt(100 * getStyle(obj,attr)) || 100; } } else { iCur = parseInt(getStyle(obj,attr)) || 0; } var iSpeed = (json[attr] - iCur) / 5; iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (json[attr] != iCur) { bStop = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fnEnd) { fnEnd.call(obj); } } } function stopMove(obj) { clearInterval(obj.timer); } function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj)[attr]; } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。