用JS实现图片轮播

来源：互联网发布：淘宝上的众筹是真的吗编辑：程序博客网时间：2024/06/04 20:03

需求：将六张图片循环播放。当鼠标移到图片上方，图片暂停。

代码：

HTML：

<!DOCTYPE html><html><head><style>#pics {height: 218px;width: 218px;border: 3px solid #ddd;}.hide {display: none;}.show {display: inline-block;}</style><meta charset="utf-8"/><title>图片轮播</title></head><body><div id="pics" onmouseover="stop()" onmouseout="change()"><img src="images/01.jpg" class="show"/><!--先将图片全部隐藏。-->                                <img src="images/02.jpg" class="hide"/><img src="images/03.jpg" class="hide"/><img src="images/04.jpg" class="hide"/><img src="images/05.jpg" class="hide"/><img src="images/06.jpg" class="hide"/></div></body><script type="text/javascript" src="change.js" ></script></html>

change.js

var id;var imgs = document.getElementsByTagName("img");var index = 0;function change(){//轮播图片id = setInterval(function(){//用定时器实现两秒钟换一张index++;for(var i=0;i<imgs.length;i++){imgs[i].className = "hide";}var next = index%imgs.length;//当前脚标模除以图片张数为下一张图片的脚标imgs[next].className = "show";//将将要显示的图片的class更换为show},2000);}function stop(){//鼠标移出时的stop方法clearInterval(id);}change();

0 0