一、实现效果
如上图:
1、图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称
2、鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片;鼠标移开后图片继续轮换
3、鼠标移到小图标上时,大图片区域会显示对应的大图;鼠标移开则从当前图片开始继续轮换
二、代码
带小图标的JS图片轮换
1 | 2 | 3 | 4 | 5 |
三、多张图片轮换调试笔记
js源代码:
HTML代码:
在使用的时候最好定义一下图片的样式,把图片的长宽都统一,这样图片动态显示的效果会更好一些。