您好,登錄后才能下訂單哦!
這篇文章主要介紹了純JS實(shí)現(xiàn)輪播圖的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
如下代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片輪播的效果</title> <style type="text/css"> * { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { position: relative; width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; } #list { position: absolute; z-index: 1; width: 4200px; height: 400px; } #list img { float: left; width: 600px; height: 400px; } #buttons { position: absolute; left: 250px; bottom: 20px; z-index: 2; height: 10px; width: 100px; } #buttons span { float: left; margin-right: 5px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #333; cursor: pointer; } #buttons .on { background: orangered; } .arrow { position: absolute; top: 180px; z-index: 2; display: none; width: 40px; height: 40px; font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer; } .arrow:hover { background-color: RGBA(0, 0, 0, .7); } #container:hover .arrow { display: block; } #prev { left: 20px; } #next { right: 20px; } </style> </head> <body> <div id="container"> <div id="list" > <img src="https://cache.yisu.com/upload/information/20200622/114/76902.jpg" alt="無(wú)縫滾動(dòng)" /> <img src="https://cache.yisu.com/upload/information/20200622/114/76902.jpg" alt="無(wú)縫滾動(dòng)" /> <img src="https://cache.yisu.com/upload/information/20200622/114/76903.jpg" alt="無(wú)縫滾動(dòng)" /> <img src="https://cache.yisu.com/upload/information/20200622/114/76904.jpg" alt="無(wú)縫滾動(dòng)" /> <img src="https://cache.yisu.com/upload/information/20200622/114/76905.jpg" alt="無(wú)縫滾動(dòng)" /> <img src="https://cache.yisu.com/upload/information/20200622/114/76906.jpg" alt="無(wú)縫滾動(dòng)" /> <img src="https://cache.yisu.com/upload/information/20200622/114/76906.jpg" alt="無(wú)縫滾動(dòng)" /> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a> </div> <script type="text/javascript"> window.onload=function(){ var container = document.getElementById("container"); var list = document.getElementById("list"); var buttons = document.getElementById("buttons").getElementsByTagName('span'); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var index = 1; function animate(offset){ var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; if(newLeft<-3000){ list.style.left= -600 +'px'; } if(newLeft>-600){ list.style.left = -3000 + 'px'; } } function buttonsshow(){ for(var i =0; i<buttons.length;i++){ if(buttons[i].className == 'on'){ buttons[i].className=''; } } buttons[index-1].className='on'; } prev.onclick = function(){ index-=1; if(index<1) { index=5; } buttonsshow(); animate(600); }; next.onclick = function(){ index+=1; if(index>5){ index=1; } buttonsshow(); animate(-600); }; //自動(dòng)播放 var timer; function play(){ timer= setInterval(function(){ next.onclick(); },1000) } play(); function stop(){ clearInterval(timer); } container.onmouseover=stop; container.onmouseout=play; for(var i=0; i<buttons.length; i++){ ( function(i){ buttons[i].onclick=function(){ var clickindex= parseInt(this.getAttribute('index')); var offset = 600*(index-clickindex); animate(offset); index = clickindex; buttonsshow(); } })(i); } } </script> </body> </html>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“純JS實(shí)現(xiàn)輪播圖的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。