如何快速制作一个简单的图片轮播？

效果图：

思路分析：

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代码如下：