使用JQuery实现图片轮播效果的实例（推荐)

【效果如图】

【原理简述】

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

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

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

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

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

【代码说明】

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

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

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

【程序源码】

首先引入射流研究…文件：

脚本src=' http : bootstrap/js/jquery-1。11 .2 .量滴js /脚本脚本src=' http : bootstrap/js/bootstrap。量滴js /脚本链接href=' bootstrap/CSS/bootstrap。量滴CSS“rel=”外部no跟随“rel=”样式表type='text/css'/HTML部分：

div id=' banner ' ul Li class=' on ' a href=' 1/a/Li lia href=' 2/a/Li lia href=' 3/a/Li lia href=' 4/a/Li lia href=' 5/a/Li lia href=' 6/a/Li/ul div id=' banner _ list ' a href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel ' no follow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' target=' _ self ' img src=' http 3360 img/a4。 jpg ' width=' 280 ' height=' 160 '/a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofoo '部分：

样式类型=' text/CSS ' # banner { position : relative；宽度宽度：280像素高度：160 pxborder:1px固体# 666;飞越：隐藏；} # banner ul { width :138 pxh three :18 px位置：绝对；列表样式-:型无；filter: Alpha(不透明度=80);opacity:0.8z索引：1002;余量：0划水：0;bottom:3pxright:5px线高： 18px文本对齐：中心；} # banner ul li { width: 18px高度： 18px余量：0px 2pxfloat:left显示：块；颜色： # FFF；border:#e5eaff 1px固体；背景# 6C6D6Ecursor :指针} # banner ul Li。在{背景： # 900 } # banner ul上阿利{ color: white} # banner ul阿利： hover { text-decoration : none；} # banner _ list a { position : absolute；} !-让六张图片都可以重叠在一起-# banner _ list { position :绝对值；right : 5pxbottom : 5px }/style js部分：

脚本类型='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实现图片轮播效果的实例（推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。