jquery图片轮播 

  1 <html>
  2 <head>
  3 <title>position</title>
  4 <style type="text/css">
  5     *{
  6         margin:0;
  7         padding:0;
  8     }
  9     ul{
 10         list-style: none;
 11     }
 12     .out{
 13         width:730px;
 14         height:454px;
 15         margin:50px auto;
 16         position:relative;
 17     }
 18     .out .img li{
 19         position:absolute;
 20         left:0;
 21         top:0;
 22     }
 23     .out .num{
 24         position:absolute;
 25         left:0;
 26         bottom:20px;
 27         text-align:center;
 28         font-size: 0;
 29         width:100%;
 30     }
 31     .out .btn{
 32         position:absolute;
 33         top:50%;
 34         margin-top:-30px;
 35         width:30px;
 36         height:60px;
 37         background-color:aliceblue;
 38         color:black;
 39         text-align:center;
 40         line-height: 60px;
 41         font-size:40px;
 42         display:none;
 43     }
 44     .out .num li{
 45         width:20px;
 46         height:20px;
 47         background-color:black;
 48         color:#fff;
 49         text-align:center;
 50         line-height:20px;
 51         border-radius:60%;
 52         display:inline;
 53         font-size:18px;
 54         margin:0 10px;
 55         cursor:pointer;
 56     }
 57     .out .num li.active{
 58         background-color:red;
 59     }
 60     .out .left{
 61         left:0;
 62     }
 63     .out .right{
 64         right:0;
 65     }
 66     .out:hover .btn{
 67         display:block;
 68         color:white;
 69         font-weight:900;
 70         background-color:black;
 71         opacity:0.8;
 72         cursor:pointer;
 73     }
 74     .out img{
 75         height:100%;
 76         width:100%;
 77     }
 78 </style>
 79 
 80 </head>
 81 <body>
 82     <div class="out">
 83         <ul class="img">
 84             <li><a href="#"><img src="bopin/images/bigImg.jpg" alt=""></a></li>
 85             <li><a href="#"><img src="bopin/images/bigImg1.jpg" alt=""></a></li>
 86             <li><a href="#"><img src="bopin/images/bigImg2.jpg" alt=""></a></li>
 87             <li><a href="#"><img src="bopin/images/bigImg3.jpg" alt=""></a></li>
 88             <li><a href="#"><img src="bopin/images/bigImg4.jpg" alt=""></a></li>
 89             <li><a href="#"><img src="bopin/images/bigImg5.jpg" alt=""></a></li>
 90         </ul>
 91 
 92         <ul class="num">
 93          <!--  <li class="active">1</li>
 94              <li>2</li>
 95              <li>3</li>
 96              <li>4</li>
 97              <li>5</li> -->
 98         </ul>
 99 
100         <div class="left btn"><</div>
101         <div class="right btn">></div>
102 
103     </div>
104 
105     <script src="jquery-1.12.3.min.js"></script>
106 
107     <script type="text/javascript">
108         $(function(){
109             var size=$(".img li").size(); //图片的数量
110             for(var i=1;i<=size;i++){
111                 var li="<li>"+i+"</li>";
112                 $(".num").append(li);     //给类插入<li>
113             }
114             $(".num li").eq(0).addClass("active");
115 
116             $(".num li").mouseover(function(){
117                 $(this).addClass("active").siblings().removeClass("active");
118                 var index=$(this).index();
119                 i=index;
120                 $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
121             });
122 
123             i=0;
124             var t=setInterval(move,1500); //无操作时，计时轮播
125 
126             function move(){
127                 i++;
128                 if(i==size){   //当图片标记最大时，轮播到开头
129                     i=0;
130                 }
131                 //图片标记切换
132                 $(".num li").eq(i).addClass("active").siblings().removeClass("active"); 
133                 //图片切换
134                 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
135             }
136 
137             function moveL(){
138                 i--;
139                 if(i==-1){
140                     i=size-1;
141                 }
142                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
143                 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
144             }
145 
146             $(".out").hover(function(){
147                 clearInterval(t);   //清空计时器
148             },function(){
149                 t=setInterval(move,1500);
150             });
151 
152             $(".out .right").click(function(){ //右切换
153                 move()
154             });
155             $(".out .left").click(function(){  //左切换
156                 moveL()
157             })
158 
159         });
160     </script>
161 
162 </body>
163 
164 </html>

 

posted @ 2016-07-27 17:07  温故余学  阅读(129)  评论(0)  编辑  收藏  举报