您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了js輪播圖的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
CSS:
<style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; } body { background: #eee; } #Bigbox { width: 720px; height: 420px; border: 1px solid #333; margin: 60px auto; } #Box { width: 700px; height: 400px; position: relative; overflow: hidden; top: 10px; left: 10px; } #Ul { height: 400px; position: absolute; top: 0; left: 0; } #Ul li { width: 700px; height: 400px; float: left; } #Left { width: 60px; height: 50px; border-radius: 30%; background: rgba(96, 96, 96, .5); position: absolute; top: 50%; left: 0; margin-top: -25px; color: #fff; line-height: 50px; text-align: center; cursor: pointer; font-size: 20px; display: none; } #Right { width: 60px; height: 50px; border-radius: 30%; background: rgba(96, 96, 96, .5); position: absolute; top: 50%; right: 0; margin-top: -25px; color: #fff; line-height: 50px; text-align: center; cursor: pointer; font-size: 20px; display: none; } </style>
html:
<div id="Bigbox"> <div id="Box"> <ul id="Ul"> <li> 1<img src="img/1.jpg" width="100%" height="100%"> </li> <li> 2<img src="img/2.jpg" width="100%" height="100%"> </li> <li> 3<img src="img/3.jpg" width="100%" height="100%"> </li> <li> 4<img src="img/4.jpg" width="100%" height="100%"> </li> <li> 5<img src="img/5.jpg" width="100%" height="100%"> </li> <li> 6<img src="img/6.jpg" width="100%" height="100%"> </li> <li> 7<img src="img/7.jpg" width="100%" height="100%"> </li> <li> 8<img src="img/8.jpg" width="100%" height="100%"> </li> <li> 9<img src="img/9.jpg" width="100%" height="100%"> </li> <li> 10<img src="img/10.jpg" width="100%" height="100%"> </li> </ul> <div id="Left" onselectstart="return false">左</div> <div id="Right" onselectstart="return false">右</div> </div> </div>
js:
<script> window.onload = function() { var n = 0; var timer = null; var timer1 = null; var timer2 = null; var timer3 = null; var oDiv = document.getElementById('Box') var oUl = document.getElementById('Ul') var oLi = oUl.getElementsByTagName('li') //獲取div寬度 var oDivWidth = getStyle(oDiv, 'width').split('px')[0] //復(fù)制oUl的innerHTML oUl.innerHTML += oUl.innerHTML //設(shè)置ul寬度 oUl.style.width = oLi.length * oDivWidth + 'px' //獲取ul寬度 var oUlWidth = getStyle(oUl, 'width').split('px')[0] //封裝獲取非行間樣式函數(shù) function getStyle(obj, sName) { if (obj.currentStyle) { return obj.currentStyle[sName]; } else { return getComputedStyle(obj, false)[sName]; } } //執(zhí)行函數(shù) clearInterval(timer3) timer3 = setInterval(function() { Run() }, 2000) //封裝運(yùn)動(dòng)函數(shù) function Run() { clearInterval(timer) timer = setInterval(function() { n -= 20; oUl.style.left = n + 'px' if (n % oDivWidth == 0) { clearInterval(timer3) clearInterval(timer) clearInterval(timer1) timer1 = setTimeout(function() { Run() }, 2000) } if (n <= -oUlWidth / 2) { oUl.style.left = 0; n = 0; clearInterval(timer3) clearInterval(timer) clearInterval(timer1) timer1 = setTimeout(function() { Run() }, 2000) } }, 30) } //鼠標(biāo)移入停止?jié)L動(dòng) oDiv.onmouseover = function() { Left.style.display = 'block' Right.style.display = 'block' clearInterval(timer3) clearInterval(timer2) timer2 = setInterval(function() { if (n % oDivWidth == 0) { clearInterval(timer) clearInterval(timer1) } }, 30) } //鼠標(biāo)移出繼續(xù)執(zhí)行 oDiv.onmouseout = function() { Left.style.display = 'none' Right.style.display = 'none' clearInterval(timer3) clearInterval(timer2) clearInterval(timer1) timer1 = setTimeout(function() { Run() }, 2000) } //向左 Left.onclick = function() { //清除所有定時(shí)器 clearInterval(timer) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) timer = setInterval(function() { n -= 50; oUl.style.left = n + 'px' if (n % oDivWidth == 0) { clearInterval(timer) } if (n <= -oUlWidth / 2) { oUl.style.left = 0; n = 0; } }, 30) } //向右 Right.onclick = function() { clearInterval(timer) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) if (n == 0) { n = -oUlWidth / 2 } clearInterval(timer) timer = setInterval(function() { n += 50; oUl.style.left = n + 'px' if (n % oDivWidth == 0) { clearInterval(timer) } }, 30) } } </script>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。