首页>案例集

JavaScript案例7:有小圆点导航和缩略图的幻灯片切换(两个版本)

很多幻灯片切换的时候,下面有一个对应的小圆点导航条。

这种案例的关键点是各自的下标传递,依然要用到自定义属性。

功能有:

1、点击下一张和上一张切换大图。

2、下面导航的小圆点的active高亮状态随着大图的切换跟着发生对应的变化。

3、点击小圆点的时候,大图跟着切换成对应的图片。

4、鼠标经过小圆点的时候,出现缩略图。

5、点击缩略图的时候,切换到对应的大图。

第一个版本,带小圆点导航的切换。

封装函数,使用精准的传递下标值实现图片切换和小圆点的active高亮切换效果。

带小圆点的幻灯片切换.gif

第二个版本,有缩略图和小圆点的导航。

封装函数,使用for循环实现active高亮的切换。

带小圆点和缩略图的幻灯片切换.gif

案例下载地址:

声明:坚持了三年的原创web前端教程网站,以为可以一直随心所欲的写下去。网站的虚拟主机和域名钱,一年大概二三百,我负担得起。可惜随着用户访问量的不断增加,阿里云每个月提供的免费流量已经不够了(用户访问网站,需要从阿里云服务器下载网页,要耗费阿里云主机的流量),需要我花钱从阿里云买流量,网站才能继续访问,这个钱一年至少一千多,我不想接广告,只能靠添加打赏插件和下载一些案例需要付费的方式补贴一点流量的钱。特此声明!

原创比抄袭难多了,请多多支持!
打赏

点赞


3
保存到:

相关文章

Top