jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

最新推荐文章于 2022-06-11 21:46:33 发布

weixin_34107955

最新推荐文章于 2022-06-11 21:46:33 发布

阅读量213

点赞数

原文链接：http://www.cnblogs.com/xwnlh/p/7028268.html

版权



 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>JQ轮播图，图片可调用，自动+鼠标点击切换</title>
 6     <script src="jquery-1.11.1.js"></script>
 7     <style>
 8         body,ul,ol,li,img{margin:0;padding:0;}
 9         ul,ol,li{list-style:none;}
10         img{vertical-align:top;}
11         #img_box{width:470px;height:150px;margin:30px auto;position:relative;overflow: hidden;}
12         #img_box ul{position:absolute;top:0;left:0;z-index:1;}
13         #img_box ol{position:absolute;bottom:15px;right:15px;z-index:2;}
14         #img_box ol li{display:inline-block;cursor:pointer;width:20px;height:20px;margin-right:5px;line-height:20px;text-align:center;background:#fff; color:#f60;}
15         #img_box ol .active{background:#f60; color:#fff;padding:2px;bottom:2px;}
16     </style>
17     <script>
18         $(function(){
19             var iNow = 0;
20             var timer = null;
21             var $imgLi=$('#img_box ul li');
22             if($imgLi.length>0){
23                 for(var i = 1; i <= $imgLi.length; i++){
24                     var $olLi=$('<li>'+ i +'</li>');
25                     $('#img_box ol').append($olLi);
26                 }
27                 $('#img_box ol li').eq(0).attr('class','active');
28             };
29 
30             timer = setInterval(toRun,2000);
31             function toRun(){
32                 if($imgLi.length>1){
33                     if(iNow == $imgLi.length-1){
34                         iNow = 0;
35                     }
36                     else{
37                         iNow++;
38                     }
39                     $('#img_box ol li').attr('class','');
40                     $('#img_box ol li').eq(iNow).attr('class','active');  
41                     $('ul').stop().animate({top : -150 * iNow},1000);
42                 }
43             }
44             $('#img_box').mouseover(function(){
45                 clearInterval(timer);
46             }).mouseout(function(){
47                 timer=setInterval(toRun,2000);
48             });
49             $('#img_box ol li').click(function(ev){
50                 //console.log($(this).html());
51                 $('#img_box ol li').attr('class','');
52                 $(this).attr('class','active');
53                 iNow = $(this).html()-1;
54                 $('ul').stop().animate({top : -150 * iNow},1000);
55             })  
56         });
57     </script>
58 </head>
59 <body>
60     <div id="img_box">
61         <ul>
62             <li><img src="img/1.jpg" alt="" /></li>
63             <li><img src="img/2.jpg" alt="" /></li>
64             <li><img src="img/3.jpg" alt="" /></li>
65             <li><img src="img/4.jpg" alt="" /></li>
66             <li><img src="img/5.jpg" alt="" /></li>
67             <li><img src="img/3.jpg" alt="" /></li>
68             <li><img src="img/4.jpg" alt="" /></li>
69             <li><img src="img/5.jpg" alt="" /></li>
70         </ul>
71         <ol>
72             <!--<li class="active">1</li>
73             <li>2</li>
74             <li>3</li>
75             <li>4</li>
76             <li>5</li>-->
77         </ol>
78     </div>
79 </body>
80 </html>