欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JQuery实现图片轮播效果_jquery

程序员文章站 2022-05-04 22:49:06
...
【原理简述】

JQuery实现图片轮播效果_jquery

这里大概说一下整个流程:

1,将除了第一张以外的图片全部隐藏,

2,获取第一张图片的alt信息显示在信息栏,并添加点击事件

3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片

4,设置setInterval,定时执行切换函数

【代码说明】

filter(":visible") :获取所有可见的元素

unbind():从匹配的元素中删除绑定的事件

siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

例:找到每个div的所有同辈元素中带有类名为selected的元素。

Hello

Hello Again

And Again

执行 $("div").siblings(),结果

[ 

Hello

,

And Again

]

【程序源码】
HTML部分:



CSS部分:

JS部分:


以上就是JQuery实现图片轮播的全部思路过程,希望对大家的学习有所帮助。