通过本文主要向大家介绍了图片轮播等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
完整的演示代码:
JQuery实现图片轮播效果
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
【原理简述】
这里大概说一下整个流程:
1,将除了第一张以外的图片全部隐藏,
2,获取第一张图片的alt信息显示在信息栏,并添加点击事件
3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片
4,设置setInterval,定时执行切换函数
【代码说明】
filter(":visible") :获取所有可见的元素
unbind():从匹配的元素中删除绑定的事件
siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
例:找到每个div的所有同辈元素中带有类名为selected的元素。
【实例演示】
- 1
- 2
- 3
- 4




[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
【原理简述】
这里大概说一下整个流程:
1,将除了第一张以外的图片全部隐藏,
2,获取第一张图片的alt信息显示在信息栏,并添加点击事件
3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片
4,设置setInterval,定时执行切换函数
【代码说明】
filter(":visible") :获取所有可见的元素
unbind():从匹配的元素中删除绑定的事件
siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
例:找到每个div的所有同辈元素中带有类名为selected的元素。