迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文实例为大家分享了jquery实现呼吸轮播效果的具体代码,供大家参考,具体内容如下 大概思路: 呼吸轮播就是图片淡入淡出轮播。 程序: <!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> 运行结果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
请发表评论