这几天一直在看js动画，今天又get到了一个轮播图，使用纯js实现的，但是外观样式不是很好看，如果大家有需要可以美化下，具体实现代码还是很完整的，大家可以参考下
这几天一直在看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> <div> <img src="https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" /> <img src="https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" /> <img src="https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="无缝滚动" /> <img src="https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="无缝滚动" /> <img src="https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="无缝滚动" /> <img src="https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" /> <img src="https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" /> </div> <div> <span index="1"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;"><</a> <a href="javascript:;">></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实现轮播图，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: