JQuery实现图片轮播效果

【原理简述】

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

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

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

3,为四个按钮添加点击侦听，点击相应的按钮，用淡出，淡入方法显示图片

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

【代码说明】

过滤器(' :可视'):获取所有可见的元素

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

兄弟姐妹：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

例：找到每个差异的所有同辈元素中带有类名为挑选的元素。

pHello/pdivspan再次您好/span/div span再次/p执行$(“div”).兄弟姐妹(),结果

【pHello/p，pAnd再次/p】程序源码】HTML部分：

body div id=' banner ' div id=' banner _ BG '/div！-标题背景- div id='banner_info'/div！-标题-ulli class=' on ' 1/Lili 2/Lili 3/Lili 4/Li/uldiv id=' banner _ list ' a href=' # ' target=' _ blank ' img src=' http : imgs/。jpg ' title='橡树小屋的博客" alt="橡树小屋的blog '/aa href=' # ' target=' _ blank ' img src=' http : imgs/P5。jpg ' title='橡树小屋的博客" alt="橡树小屋的blog/aa href=' # ' target=' _ blank ' img src=' http : imgs/P3。jpg ' title='橡树小屋的博客" alt="橡树小屋的blog/aa href=' # ' target=' _ blank ' img src=' http : imgs/P4。jpg ' title='橡树小屋的博客" alt="橡树小屋的博客/a/div/div/bodyCSS部分：

样式类型=' text/CSS ' # banner { position : relative；宽度宽度：478像素高度：286 pxborder:1px固体# 666;飞越：隐藏；} # banner _ list img { border 33600 px；} # banner _ BG {位置：绝对值；底部：0;背景色： # 000;高度：30 pxfilter: Alpha(不透明度=30);opacity:0.3z指数：1000;光标：指针指针；宽度width :478 px } # banner _ info { position :绝对值；底部：0;left :5 px h8 :22 pxcolor : # fffz索引：1001;光标：指针} # banner _ text {位置：绝对；宽度宽度：120像素索引：1002;right :3 pxbottom :3 px } # banner ul { position : absolute；列表样式-:型无；filter: Alpha(不透明度=80);opa city 33600.8 border :1 px实心# fffz索引：1002;余量：0划水：0;bottom :3 pxright :5 px } # banner ul Li { padd :0 px 8pxfloat : left显示：块；颜色： # FFF；border:#e5eaff 1px固体；背景# 6f4f 67光标：指针} # banner ul Li。在{背景： # 900 } # banner _ list a {位置： absolute} !-让四张图片都可以重叠在一起- /styleJS部分：

脚本类型='text/javascript'var t=n=0，计数；$(文档)。ready(function(){ count=$(' # banner _ list a ')).长度；$(“# banner _ list a : not(: first-child)”).hide()；$('#banner_info ').html($(' # banner _ list a :第一个孩子').查找(' img ').attr(' alt ')；$('#banner_info ').单击(function(){ window。open($(' # banner _ list a :第一个孩子').attr('href ')，' _ blank ')})；$('#banner li ').单击(function() {var i=$(this)).text()-1；//获取里元素内的值，即1，2，3，4n=I；如果(i=计数)返回；$('#banner_info ').html($('#banner_list a ').方程式(I ).查找(' img ').attr(' alt ')；$('#banner_info ').解除绑定()。单击(function(){ window。打开($(' # banner _ list a ').方程式(I ).attr('href ')，' _ blank ' })$(' # banner _ list a ').过滤器(' :可视').淡出(500)。父项()。儿童()。方程式(I ).淡入(1000)；文件。getelementbyid(' banner ')。风格。背景=' '；$(这个)。切换类(' on ')；$(这个)。兄弟姐妹()。移除attr(' class ')；});t=setInterval('showAuto()'，4000)；$(“# banner”).hover(function(){ clearInterval(t)}，function(){ t=setInterval(' showAuto()'，4000)；});})函数showAuto(){n=n=(count -1)？北纬0 :$('#banner li ').方程式(n)1 .触发器(“点击”)；}/脚本以上就是JQuery实现图片轮播的全部思路过程，希望对大家的学习有所帮助。