這幾天一直在看js動畫，今天又get到了一個輪播圖，使用純js實現的，但是沒有美化哈，需要的小伙伴自己美化喔
如下代碼：
<!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" style="left: -600px;"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無縫滾動" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無縫滾動" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="無縫滾動" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="無縫滾動" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="無縫滾動" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無縫滾動" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無縫滾動" /> </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); }; //自動播放 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>以上所述是小編給大家介紹的純JS實現輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
