| 本文实例为大家分享了jquery实现呼吸轮播效果的具体代码，供大家参考，具体内容如下 大概思路： 呼吸轮播就是图片淡入淡出轮播。
div（设置相对定位）里存放ul，li不需要float：left，设置绝对定位即可。left：0，top：0。
此时不需要在所有图片后面补假0.
div里还包括左右按钮，下面小圆点，通过绝对定位，把它们定位到合适位置就好。
设置index为0，点击右按钮时，当前图片淡出，index++，当图片为最后一个的时候，index设置为0，新图片淡入。下面小圆点对应变色。
左按钮思路大致相同。
下面小图片点击的时候，如果点击的和当前显示的index相同，则什么事情都不需要做。
点击其他小圆点的时候，旧的图片淡出，把当前小圆点的index赋值给全局变量index，新图片淡入。
被点击的小圆点变色，其兄弟元素仍然为最初的颜色。 程序： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ margin:0; padding:0; } .big{ width:560px; height:300px; position: relative; margin:200px auto; border:10px solid red; } .big .move{ width:5600px; height:300px; position: absolute; left:0; top:0; } .big .move li{ /*float: left;*/ list-style: none; display: none; position: absolute; top:0; left:0; } .big ul .first{ display: block; } img{ width:560px; height:300px; } .btn div{ width:40px; height:60px; background: red; position: absolute; top:50%; margin-top:-30px; } .rightbtn{ right:0; } .circle{ position: absolute; left:0px; bottom:0px; width:200px; height:30px; } .circle ul{ /*overflow: hidden;*/ list-style: none; float: left; } .circleUl li{ background: white; float: left; margin-right:10px; width:20px; height:20px; border-radius:50%; }</style><body><div class="big"> <ul class="move"> <li class="first"> <img src="img/0.jpg" alt=""> </li> <li> <img src="img/1.jpg" alt=""> </li> <li> <img src="img/2.jpg" alt=""> </li> <li> <img src="img/3.jpg" alt=""> </li> </ul> <div class="btn"> <div class="leftbtn"> < </div> <div class="rightbtn"> > </div> </div> <div class="circle"> <ul class="circleUl"> <li></li> <li></li> <li></li> <li></li> </ul> </div></div><script src="js/jquery-1.12.3.min.js"> </script><script>// 设置第一个小圆点为红色 $(".circleUl li").eq(0).css("background","red"); var index = 0; $(".leftbtn").click(function(){// 旧的图淡出 $(".move li").eq(index).fadeOut(400); index--; if(index<0){ index = 3; }// 新图淡入 $(".move li").eq(index).fadeIn(400);// 对应下标为index的小圆点变色 $(".circleUl li").eq(index).css("background","red").siblings().css("background","white"); }); $(".rightbtn").click(function(){ $(".move li").eq(index).fadeOut(400); index++; console.log(index); if(index ==4 ){ index = 0; } $(".move li").eq(index).fadeIn(400); $(".circleUl li").eq(index).css("background","red").siblings().css("background","white"); });// 小圆点点击事件 $(".circleUl li").click(function(){// 如果本来就显示的图一，再次点击第一个小圆点的话，什么也不做 if(index == $(this).index()) return;// 旧的图片淡出 $(".move li").eq(index).fadeOut(400);// 点击到哪个小圆点，把小圆点的index赋值给全局变量index （更新全局变量index） index = $(this).index(); // 新图片淡入 $(".move li").eq(index).fadeIn(400);// 小圆点变色 $(this).css("background","red").siblings().css("background","white"); })</script></body></html>运行结果： 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
jQuery实现呼吸轮播图
jquery实现百叶窗效果(利用li的定位) |
