图片轮播函数
1.根据图片数量自动生成点击按钮。
2.图片少于等于一张的时候轮播效果取消，按钮也取消。
3.自动轮播
代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body,ul,li,h2{ list-style-type: none; padding: 0; margin: 0;} 8 .wrap{ width: 700px; margin: 0 auto;} 9 .wrap .img_banner {position:relative; width:698px; height:258px; border:1px solid #5576af;overflow:hidden; float: left;} 10 .wrap .img_banner ul {position:absolute; z-index:1002;bottom:15px; right:10px;} 11 .wrap .img_banner ul li { float:left; background:#fff; cursor:pointer; width:14px;height: 14px;line-height: 14px;margin-right: 15px; font-size: 12px; text-align: center;text-indent: -10000px;} 12 .wrap .img_banner ul li.on { background:#ffb80e} 13 .wrap .img_banner .img_list a{position:absolute;} /* 让四张图片都可以重叠在一起 */ 14 .wrap .img_banner .img_list img {border:0px; width: 698px; height: 258px;} 15 </style> 16 </head> 17 <body> 18 <div class="wrap"> 19 <div class="img_banner"> 20 <div class="img_list"> 21 <a href="#" target="_blank"><img src="/6rooms/html/img/gsh/gsh_banner1.jpg"></a> 22 <a href="#" target="_blank"><img src="/6rooms/html/img/gsh/gsh_banner2.jpg"></a> 23 <a href="#" target="_blank"><img src="/6rooms/html/img/gsh/gsh_banner3.jpg"></a> 24 </div> 25 </div> 26 </div> 27 </body> 28 <script src="/6rooms/html/js/jquery.js"></script> 29 <script> 30 $(function(){ 31 function imgBannerChange(oImgBanner){ 32 var Timer = AutoNum =0; 33 oImgBanner.append("<ul class='img_btn'></ul>");//生成按钮列表 34 var oImgUl = oImgBanner.children('ul');//ul列表 35 var oImg = oImgBanner.find('.img_list a');//找出图片 36 var oImgNum = oImg.length;//找出图片张数 37 //根据图片张数，生成按钮 38 for (var oli = 0; oli < oImgNum; oli++) { 39 var liHtml = "<li>"+oli+"</li>" 40 oImgUl.append(liHtml); 41 }; 42 var oImgList = oImgUl.children('li');//ul列表 43 oImgList.first().addClass('on');//第一个按钮加on 44 if (oImgNum <=1) {oImgList.css('display', 'none'); return;}; 45 //$(".img_list a:not(:first-child)").hide(); 46 oImg.not(oImg.first()).hide(); 47 oImgList.click(function(){ 48 $(this).addClass("on").siblings().removeClass("on"); 49 var i = $(this).text();//获取Li元素内的值，即1，2，3，4 50 AutoNum = i; 51 if (i >= oImgNum) return; 52 oImg.filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); 53 }); 54 //定时器 55 Timer = setInterval(showAuto, 4000); 56 oImgBanner.hover(function(){clearInterval(t)}, function(){t = setInterval(showAuto, 4000);}); 57 //自动轮播 58 function showAuto(){ 59 AutoNum = AutoNum >=(oImgNum -1) ?0 : ++AutoNum; 60 $(".img_banner li").eq(AutoNum).trigger('click'); 61 }; 62 } 63 imgBannerChange($(".img_banner")); 64 }) 65 66 </script> 67 </html>
查看效果：