圖片輪轉 漸進漸出效果 js代碼

無聊寫的小功能：

Html:

 1 <div class="banner_pic">
 2     <div class="pic">
 3         <ul>
 4             <li class="now"><a href=""><img src="img/01.jpg" alt="" /></a></li>
 5             <li><a href=""><img src="img/02.jpg" alt="" /></a></li>
 6             <li><a href=""><img src="img/03.jpg" alt="" /></a></li>
 7             <li><a href=""><img src="img/04.jpg" alt="" /></a></li>
 8             <li><a href=""><img src="img/05.jpg" alt="" /></a></li>
 9         </ul>
10     </div>
11     <div class="num">
12         <a href="#1" class="select">1</a><a href="#2">2</a><a href="#3">3</a><a href="#4">4</a><a href="#5">5</a>
13     </div>
14 </div>

Css:

1 .banner_pic{border:1px solid #ccc; width:300px; height:215px; margin:50px auto; overflow:hidden; position:relative; z-index:5;}
2 .pic{position:relative;}
3 .pic ul li{float:left; position:absolute; left:0; top:0; display:none;}
4 .pic ul li.now{display:block;}
5 .pic ul li a img{width:300px; height:215px;}
6 .num{position:absolute; right:5px; bottom:5px; z-index:10;}
7 .num a{border:1px solid #ccc; width:16px; height:14px; text-align:center; line-height:14px; display:inline-block; text-decoration:none; margin-left:2px;}
8 .num a:hover,.num a.select{background:#00f; color:#fff;}

JS:

 1 <script type="text/javascript">
 2 function BannerPic(){
 3     this.init();
 4 }
 5 BannerPic.prototype = {
 6     init : function(){
 7         var _this = this;
 8         _this.event();
 9     },
10     event : function(){
11         var _this = this;
12         _this.auto();
13         $('.num a').click(function(){
14             clearInterval(autoShow);
15             var thisPic = $('.num a.select').index(),
16                 nextPic = $(this).index();
17             _this.picActive(thisPic,nextPic);
18             _this.auto();
19         });
20     },
21     auto : function(){
22         var _this = this;
23         autoShow = setInterval(function(){
24             var thisPic = $('.pic ul li.now').index();
25             if(thisPic == $('.pic ul li').length - 1){
26                 var nextPic = 0;
27             }else{
28                 var nextPic = thisPic + 1;
29             }
30             _this.picActive(thisPic,nextPic);
31         },3000);
32     },
33     picActive : function(thisPic,nextPic){
34         $('.pic ul li').eq(thisPic).fadeOut('slow').removeClass('now');
35         $('.num a').eq(thisPic).removeClass('select');
36         $('.pic ul li').eq(nextPic).fadeIn('slow').addClass('now');
37         $('.num a').eq(nextPic).addClass('select');
38     }
39 }
40 $(document).ready(function(){
41     new BannerPic();
42 });
43 </script>
posted @ 2012-05-21 11:53  妙計出自山人  阅读(4066)  评论(0)  编辑  收藏  举报