纯JS实现轮播图

时间：2021-05-18

这几天一直在看js动画，今天又get到了一个轮播图，使用纯js实现的，但是没有美化哈，需要的小伙伴自己美化喔

如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///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">&lt;</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">&gt;</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实现轮播图，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章