html 轮播_前端轮播图怎么做？JavaScript来帮你轻松搞定

效果图

思路分析：

1、开启一个定时器

方法名：window.setInterval(code,MilliSec)，每隔指定的时间就执行code，无限次执行。

2、定时器函数主要是用来执行图片轮播的效果

3、当鼠标放在图片上面时，图片就停止了轮播的效果 清除了定时器

方法名：window.clearInterval (timer)，清除指定的定时器。

　4、当鼠标离开图片上面时，图片继续在执行轮播的效果 重新开启了定时器功能

5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器

6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片

7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果 重新开启了定时器功能

8、li标签上面的高亮效果，它是随着图片滚动而滚动。

HTML代码

123456

JS代码