jQuery实现图片伦播效果(淡入淡出+左右切换) 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             *{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             ul li {
 12                 list-style: none;
 13             }
 14             a{
 15                 text-decoration: none;
 16             }
 17             #banner{
 18                 width: 100%;
 19                 height: 300px;
 20                 overflow: hidden;
 21                 background: rgb(40, 40, 40 , .4);
 22             }
 23             #center{
 24                 width: 760px;
 25                 height: 300px;
 26                 margin: 0 auto;
 27                 position: relative;
 28             }
 29             #center ul {
 30                 width: 760px;
 31                 height: 300px;
 32             }
 33             #center ul li{
 34                 width: 760px;
 35                 height: 300px;
 36             }
 37             #center ul li a img{
 38                 width: 100%;
 39                 height: 100%;
 40                 display: block;
 41             }
 42             #center .btn{
 43                 display: none;
 44                 position: absolute;
 45                 width: 46px;
 46                 height: 70px;
 47                 top: 110px;
 48                 font-size: 30px;
 49                 color: #fff;
 50                 text-align: center;
 51                 line-height: 70px;
 52                 background: rgba( 0 , 0 , 0 , .4 );
 53                 font-weight: 600;
 54             }
 55             #center .btn:hover{
 56                  background: rgba( 0 , 0 , 0 , .8 );
 57             }
 58             #center .left{
 59                 left: 15px;
 60             }
 61             #center .right{
 62                 right: 15px;
 63             }
 64             #list{
 65                 width: 88px;
 66                 position: absolute;
 67                 bottom: 15px;
 68                 left: 50%;
 69                 margin-left: -44px;
 70                 background: rgba(0,0,0,.4);
 71                 border-radius: 20px;
 72                 padding: 2px 10px;
 73             }
 74             #list span{
 75                 display: inline-block;
 76                 width: 9px;
 77                 height: 9px;
 78                 border-radius: 50%;
 79                 border: 1px solid #fff;
 80                 cursor: pointer;
 81             }
 82             #list span.active{
 83                 background: #fff;
 84             }
 85             
 86         </style>
 87     </head>
 88     <body>
 89         <div id="banner">
 90             <div id="center">
 91                 <ul>
 92                     <li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
 93                     <li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
 94                     <li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
 95                     <li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
 96                     <li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
 97                 </ul>
 98                 <a href="javascript:;" class="btn left">&lt;</a>
 99                 <a href="javascript:;" class="btn right">&gt;</a>
100                 <div id="list">
101                     <span class="active"></span>
102                     <span></span>
103                     <span></span>
104                     <span></span>
105                     <span></span>
106                 </div>
107             </div>
108         </div>
109         <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
110         <script type="text/javascript">
111             var $banner = $('#banner');
112             var $span = $('#list span');
113             var $li = $('#center ul li');
114             var $btn = $('#center .btn');
115             var $right = $('#center .right');
116             var $left = $('#center .left');
117             var timer = null;
118             var $index = 0;
119             $banner.hover(function(){
120                 $btn.fadeIn( 500 );
121                 clearInterval(timer);
122             },function(){
123                 $btn.fadeOut( 500 );
124                 timer = setInterval(rightC,2000);
125             })
126             $right.click(function(){
127                 rightC();
128             })
129             $left.click(function(){
130                 leftC();
131             });
132             
133             timer = setInterval(rightC,2000);
134             $span.mouseover(function(){
135                 $index = $(this).index();
136                 change();
137             })
138             function rightC(){
139                 $index ++;
140                 if($index>$span.size()-1){
141                     $index = 0;
142                 }
143                 change();
144             }
145             function leftC(){
146                 $index --;
147                 if($index<0){
148                     $index = $span.size()-1;
149                 }
150                 change();
151             }
152             function change(){
153                 $span.eq($index).addClass('active').siblings().removeClass('active');
154                 $li.eq($index).stop().fadeIn(500).siblings().stop().fadeOut(500);
155             }
156         </script>
157     </body>
158 </html>

 

posted @ 2016-09-29 20:47  郑福坤  阅读(361)  评论(0)    收藏  举报