banner图片滚动V3.0加强版
之前也写过几个banner的图片滚动插件，但总体感觉总是差了那么一点点，今天有空，就发布一个目前自己还算满意的banner图片滚动插件
文件：[点击下载]
html:
1 <div id="banner1"> 2 <div class="banner"> 3 <div class="pic"> 4 <ul> 5 <li class="now"> 6 <a href="" class="pic_a"><img src="01.jpg" alt="" /></a> 7 <p><a href="#">说明文字1</a></p> 8 </li> 9 <li> 10 <a href="" class="pic_a"><img src="02.jpg" alt="" /></a> 11 <p><a href="#">说明文字2</a></p> 12 </li> 13 <li> 14 <a href="" class="pic_a"><img src="03.jpg" alt="" /></a> 15 <p><a href="#">说明文字3</a></p> 16 </li> 17 </ul> 18 </div> 19 <div class="num"> 20 <a href="#1" class="select">1</a><a href="#2">2</a><a href="#3">3</a> 21 </div> 22 </div> 23 </div> 24 <div id="banner2"> 25 <div class="banner"> 26 <div class="pic"> 27 <ul> 28 <li class="now"> 29 <a href="" class="pic_a"><img src="01.jpg" alt="" /></a> 30 <p><a href="#">说明文字1</a></p> 31 </li> 32 <li> 33 <a href="" class="pic_a"><img src="02.jpg" alt="" /></a> 34 <p><a href="#">说明文字2</a></p> 35 </li> 36 <li> 37 <a href="" class="pic_a"><img src="03.jpg" alt="" /></a> 38 <p><a href="#">说明文字3</a></p> 39 </li> 40 <li > 41 <a href="" class="pic_a"><img src="04.jpg" alt="" /></a> 42 <p><a href="#">说明文字4</a></p> 43 </li> 44 </ul> 45 </div> 46 <div class="num"> 47 <a href="#1" class="select">1</a><a href="#2">2</a><a href="#3">3</a><a href="#4">4</a> 48 </div> 49 </div> 50 </div> 51 <div id="banner3"> 52 <div class="banner"> 53 <div class="pic"> 54 <ul> 55 <li class="now"> 56 <a href="" class="pic_a"><img src="01.jpg" alt="" /></a> 57 <p><a href="#">说明文字1</a></p> 58 </li> 59 <li> 60 <a href="" class="pic_a"><img src="02.jpg" alt="" /></a> 61 <p><a href="#">说明文字2</a></p> 62 </li> 63 <li> 64 <a href="" class="pic_a"><img src="03.jpg" alt="" /></a> 65 <p><a href="#">说明文字3</a></p> 66 </li> 67 <li > 68 <a href="" class="pic_a"><img src="04.jpg" alt="" /></a> 69 <p><a href="#">说明文字4</a></p> 70 </li> 71 <li> 72 <a href="" class="pic_a"><img src="02.jpg" alt="" /></a> 73 <p><a href="#">说明文字5</a></p> 74 </li> 75 </ul> 76 </div> 77 <div class="num"> 78 <a href="#1" class="select">1</a><a href="#2">2</a><a href="#3">3</a><a href="#4">4</a><a href="#4">5</a> 79 </div> 80 </div> 81 </div>
CSS:
1 .banner{background:#fff; overflow:hidden; position:relative; z-index:5;} 2 .banner .pic{position:relative;} 3 .banner .pic ul li{float:left; position:absolute; left:0; top:0; display:none;} 4 .banner .pic ul li.now{display:block;} 5 .banner .pic ul li a.pic_a{display:block; overflow:hidden;} 6 .banner .pic ul li p{background:#606060;} 7 .banner .pic ul li p a{color:#fff; text-decoration:none; margin-left:10px;} 8 .banner .pic ul li p a:hover{text-decoration:underline;} 9 .banner .num{position:absolute; right:5px; bottom:4px; z-index:10;} 10 .banner .num a{background:#fff; color:#2f5543; width:16px; height:16px; text-align:center; line-height:16px; display:inline-block; text-decoration:none; margin-left:4px;} 11 .banner .num a:hover,.banner .num a.select{background:#8cb605; color:#fff;}
JS:
1 /** 2 author : zhupinglei_zjnb@163.com 3 desc : banner图片切换插件 4 version : 3.0 5 **/ 6 (function($){ 7 8 function BANNER(here,options,index){ 9 var _this = this; 10 this.$e = $(here); 11 this.opts = options; 12 this.index = index; 13 this.init(); 14 } 15 BANNER.prototype = { 16 init : function(){ 17 var _this = this; 18 _this.$e.find('.banner').css({ 19 'width':_this.opts.width + 'px', 20 'height':_this.opts.height + 'px' 21 }); 22 if(_this.opts.bottomTxt){ 23 _this.$e.find('.banner .pic ul li a.pic_a,.banner .pic ul li a img').css({ 24 'width':_this.opts.width + 'px', 25 'height':_this.opts.height - _this.opts.bottomHeight + 'px' 26 }); 27 _this.$e.find('.banner .pic ul li p').css({ 28 'height':_this.opts.bottomHeight + 'px', 29 'line-height':_this.opts.bottomHeight + 'px' 30 }); 31 if($.browser.msie && ($.browser.version == 7.0)){ 32 _this.$e.find('.banner .pic ul li p').css({ 33 'width':_this.opts.width + 'px' 34 }); 35 } 36 }else{ 37 _this.$e.find('.banner .pic ul li a.pic_a,.banner .pic ul li a img').css({ 38 'width':_this.opts.width + 'px', 39 'height':_this.opts.height + 'px' 40 }); 41 } 42 _this.$e.find('.banner .pic ul li').eq(0).addClass('now'); 43 _this.$e.find('.banner .num a').eq(0).addClass('select'); 44 _this.event(); 45 }, 46 event : function(){ 47 var _this = this; 48 _this.auto(); 49 _this.$e.find('.banner .num a').on('click',function(){ 50 clearInterval(_this.autoShow); 51 var thisPic = _this.$e.find('.banner .num a.select').index(), 52 nextPic = $(this).index(); 53 _this.picActive(thisPic,nextPic); 54 _this.auto(); 55 }); 56 }, 57 auto : function(){ 58 var _this = this; 59 _this.autoShow = setInterval(function(){ 60 var thisPic = _this.$e.find('.banner .pic ul li.now').index(); 61 if(thisPic == _this.$e.find('.banner .pic ul li').length - 1){ 62 var nextPic = 0; 63 }else{ 64 var nextPic = thisPic + 1; 65 } 66 _this.picActive(thisPic,nextPic); 67 },(_this.opts.time*1000)); 68 }, 69 picActive : function(thisPic,nextPic){ 70 var _this = this; 71 _this.$e.find('.banner .pic ul li').eq(thisPic).fadeOut(500).removeClass('now'); 72 _this.$e.find('.banner .num a').eq(thisPic).removeClass('select'); 73 _this.$e.find('.banner .pic ul li').eq(nextPic).fadeIn(1500).addClass('now'); 74 _this.$e.find('.banner .num a').eq(nextPic).addClass('select'); 75 } 76 } 77 $.fn.Banner = function(options){ 78 var opts = $.extend({},$.fn.Banner.defaults,options); 79 return this.each(function(index){ 80 this.Banner = new BANNER(this,opts,index); 81 }); 82 } 83 $.fn.Banner.defaults = { 84 width:300, //图片宽度 85 height:215, //图片高度 86 time:4, //轮转时间 87 bottomTxt:false, //是否有底部文字说明 88 bottomHeight:0 //底部文字说明高度 89 } 90 91 })(jQuery);
用法：
1 $('#banner1').Banner({ 2 width:300, 3 height:215, 4 time:2, 5 bottomTxt:false, 6 bottomHeight:0 7 }); 8 $('#banner2').Banner({ 9 width:500, 10 height:200, 11 time:3, 12 bottomTxt:true, 13 bottomHeight:24 14 }); 15 $('#banner3').Banner({ 16 width:200, 17 height:300, 18 time:6, 19 bottomTxt:true, 20 bottomHeight:24 21 });
以上~
