图片轮播小列子

图片轮播函数

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>
View Code

查看效果：

http://www.snowinmay.net/test/Carousel.html

posted @ 2013-09-12 18:19  snowinmay  阅读(709)  评论(0)  编辑  收藏  举报