首页>案例集

JavaScript案例6:有缩略图的幻灯片切换(有两个版本)

幻灯片切换的案例中,如果不存在缩略图或者导航的小点点,一般只需要下标值的改变即可。

如果存在两组数据,而且数据之间必须有一一对应的关系时,就要依赖自定义属性的方法来传递各自的下标值了。

这个案例有两个版本。

第一个版本没有封装成函数,缩略图的active高亮效果的改变,是用点击下一个,去掉上一个有active的方式精准实现的。

第二个版本把图片的切换封装成了函数,缩略图的active高亮效果,用的是先把所有li的active效果去掉,再为当前被点击的li添加active完成。

该案例的核心依然是数组和自定义属性的应用。

功能有:

1、点击缩略图或者鼠标经过缩略图,缩略图有active高亮状态,同时切换对应的大图。

2、随着图片的变化,图片的统计数字和标题发生对应的变化。

效果如下:

有缩略图的幻灯片.gif

案例下载地址:

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

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

点赞


1
保存到:

相关文章

Top