效果图
思路分析：
1、开启一个定时器
方法名：window.setInterval(code,MilliSec)，每隔指定的时间就执行code，无限次执行。
2、定时器函数主要是用来执行图片轮播的效果
3、当鼠标放在图片上面时，图片就停止了轮播的效果 清除了定时器
方法名：window.clearInterval (timer），清除指定的定时器。
4、当鼠标离开图片上面时，图片继续在执行轮播的效果 重新开启了定时器功能
5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器
6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片
7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果 重新开启了定时器功能
8、li标签上面的高亮效果，它是随着图片滚动而滚动。
HTML代码
![轮播图怎么做]()
- 1
- 2
- 3
- 4
- 5
- 6
登录后复制
JS代码
window.οnlοad=function(){timer=setInterval("imgScroll()",500);var scroll_number=document.getElementById('scroll_number');scrLi=scroll_number.getElementsByTagName('li');scrLiLen=scrLi.length;}var n=2;function imgScroll(){for(var i=0;i6){n=1;}}function stopScroll(imgN){if(imgN){n=imgN;imgScroll();}clearInterval(timer);}function goon(){timer=setInterval('imgScroll()',500);}
登录后复制
以上就是轮播图怎么做的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2729924.html
