JS实现普通轮播图特效-创新互联

本文实例为大家分享了JS实现轮播图特效的具体代码，供大家参考，具体内容如下

知识点

轮播图思想：

① 建立一个全局变量索引，始终标记当前显示图片。
② 根据当前图片的数量，动态创建下方的●图片指示器。
③ 轮播图的初始状态为第一张图片在中间，剩余所有图片均放在即将显示图片位置。
④ 当点击>的时候，当前图片调用动画移动函数进行左移，与此同时新的一张图片调用动画函数移入到div中，而会将下一张展示的图片移动到div右侧。
⑤ 需要进行边界判断，如果当前的图片大于图片数量或者小于等于0，重新给索引赋值。
⑥ 当点击图片指示器的时候，首先判定点击的与索引的位置关系，然后进行动画移动。
⑦ 给div添加定时器，自动移动图片。当鼠标进入div，删除定时器，当鼠标移出div，设置定时器。

运行效果

1.自动轮播
2.点击左右切换图片
3.点击下方图片指示器切换图片

代码

引入MyTools.js库

1.html

 
 
 



 

 

 

 

 

 

 
 

 <
 >