首页 > 代码库 > jQuery 图片轮播
jQuery 图片轮播
图片轮播效果图 如上
思路：
1.每隔一定的时间切换一张图片：javascript中的setTimeout()和setInterval()符合条件，注意两者之间的区别。
2.循环问题：定义一个全局变量num，每切换了一张图片，num++，但因为是死循环，num可能无限大，用num=num%图片个数，可以保证num的值不大于图片个数。
关键代码：
1 //图片与数字的轮播 2 function sonCarousel(){ 3 //隐藏所有的图片，使所有的数字背景为灰色 4 $("."+className).find("img").hide(); 5 $("."+className).find("span").removeClass("spanActivate").addClass("spanNoActivate"); 6 //$("."+className).find("span").css("background","#999");//同上效果 7 //显示对应的图片，使激活状态的数字背景颜色为红色 8 $("."+className).find("img:eq("+currentNum+")").show(); 9 $("."+className).find("span:eq("+currentNum+")").removeClass("spanNoActivate").addClass("spanActivate");10 //$("."+className).find("span").css("background","#E4393C");//同上效果11 //定时器，每一秒钟改变一次12 carouselTime=setTimeout(sonCarousel,1000);13 //图片序列++，实现轮换效果14 currentNum++;15 currentNum%=picNum;16 17 }
3.以上两点总结来说是：隐藏所有图片，显示编号为num的图片，setTimeout特定时间再次执行本身的函数，num++，num%=num
4.图片编号css样式思路：1>绝对定位，在图片的右下角需要text-align：right；bottom：XXpx；position：absolute；
div的长度与宽度
2>每个span的样式,垂直，水平居中：height：22px；line-height：22px；width：22px；text-align：center；border-radius: 12px；为每个span做圆形，margin：0 1px；间隔
1 .number{ 2 position: absolute; 3 text-align: right; 4 padding: 4px 10px; 5 z-index: 1; 6 bottom: 3px; 7 width: 650px; 8 height: 22px; 9 }10 .pic span{11 display: inline-block;12 margin: 0 1px;13 text-align: center;14 color: #FFFFFF;15 border-radius: 12px ;16 width: 22px;17 height: 22px;18 line-height: 22px;19 cursor: pointer;20 }
5.动态生成图片编号：
1 //获取图片的张数 2 var picNum = $("." + className).find("img").length; 3 //创建显示数字轮播的div 4 var spanDiv = $("<div class=‘number‘></div>"); 5 for (var i = 1; i <= picNum; i++) { 6 var spanCurrent = $("<span >" + i + "</span>"); 7 spanDiv.append(spanCurrent); 8 } 9 //把创建好的数字轮播添加到图片中去10 spanDiv.appendTo("." + className);
6.点击编号显示相应的图片：
1 //点击数字显示对应的图片2 $(".number span").click(function(){3 clearTimeout(carouselTime);4 currentNum=this.innerHTML-1;5 sonCarousel();6 });
1 //实现图片轮播的效果 2 3 var currentNum=0; 4 var carouselTime; 5 function carousel(className) { 6 //获取图片的长度与宽度 7 var width=$("." + className).find("img").get(0).width; 8 var height=$("." + className).find("img").get(0).height; 9 $("." + className).css({10 "position":"absolute",11 "width":width,12 "height":height13 });14 //获取图片的张数15 var picNum = $("." + className).find("img").length;16 //创建显示数字轮播的div17 var spanDiv = $("<div class=‘number‘></div>");18 for (var i = 1; i <= picNum; i++) {19 var spanCurrent = $("<span >" + i + "</span>");20 spanDiv.append(spanCurrent);21 }22 //把创建好的数字轮播添加到图片中去23 spanDiv.appendTo("." + className);24 //图片与数字的轮播25 function sonCarousel(){26 //隐藏所有的图片，使所有的数字背景为灰色27 $("."+className).find("img").hide();28 $("."+className).find("span").removeClass("spanActivate").addClass("spanNoActivate");29 //$("."+className).find("span").css("background","#999");//同上效果30 //显示对应的图片，使激活状态的数字背景颜色为红色31 $("."+className).find("img:eq("+currentNum+")").show();32 $("."+className).find("span:eq("+currentNum+")").removeClass("spanNoActivate").addClass("spanActivate");33 //$("."+className).find("span").css("background","#E4393C");//同上效果34 //定时器，每一秒钟改变一次35 carouselTime=setTimeout(sonCarousel,1000);36 //图片序列++，实现轮换效果37 currentNum++;38 currentNum%=picNum;39 40 }41 sonCarousel();42 //点击数字显示对应的图片43 $(".number span").click(function(){44 clearTimeout(carouselTime);45 currentNum=this.innerHTML-1;46 sonCarousel();47 });48 }
1 *{ 2 padding: 0; 3 margin: 0; 4 border: 0; 5 } 6 7 .number{ 8 position: absolute; 9 text-align: right;10 padding: 4px 10px;11 z-index: 1;12 bottom: 3px;13 width: 650px;14 height: 22px;15 }16 .pic span{17 display: inline-block;18 margin: 0 1px;19 text-align: center;20 color: #FFFFFF;21 border-radius: 12px ;22 width: 22px;23 height: 22px;24 line-height: 22px;25 cursor: pointer;26 }27 .spanActivate{28 background-color: #E4393C;29 }30 .spanNoActivate{31 background-color: #999;32 }
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="copyright" /> 7 <script type="text/javascript" src="jquery-1.9.1.js"></script> 8 <link rel="stylesheet" type="text/css" href="Carousel.css"> 9 <script type="text/javascript" src="Carousel.js"></script>10 11 </head>12 <body>13 <div class="pic" >14 <img src="img/1.jpg">15 <img src="img/2.jpg">16 <img src="img/3.jpg">17 <img src="img/1.jpg">18 <img src="img/2.jpg">19 <img src="img/3.jpg">20 21 </div>22 <script type="text/javascript">23 $(document).ready(function(){24 carousel("pic");25 });26 </script>27 </body>28 </html>29
难点：
1.setTimeout里面的函数带参数传递：
setTimeout(function(){resetbgColor(obj);},3000);
2.jQuery创建div的样式设置问题，待解决
jQuery 图片轮播
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。