圖片輪轉 漸進漸出效果 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>