纯JS实现轮播图
程序员文章站
2023-11-30 09:30:22
这几天一直在看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 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实现轮播图,希望对大家有所帮助
上一篇: Python基于pycrypto实现的AES加密和解密算法示例
下一篇: js字符串倒序的实例代码