在上上一期写了怎么写jq插件，现在，我把我写的一个焦点图插件贡献出来。不会写插件的朋友们可以参考我上次写的：http://www.cnblogs.com/zhutty/p/4630110.html。因为jq比较好掌握，以后这方面的介绍会少些，之后将与大家共享Angular,node,require,backbone等js内容。其实只要掌握了几种，其他都会变得很简单。计算机技术日新月异，作为一名程序员，应该具备快速学习的能力。好了，不废话。欢迎加群一起讨论交流
。
直接上代码，可能不是最好的，欢迎吐槽。
1 /** 2 * Created by Steven on 2015/07/10/0010. 3 * @email zhuttymore@126.com 4 */ 5 6 (function ($) { 7 8 $.fn.slider = function (opt) { 9 opt = $.extend({ 10 speed:'fast', 11 auto: false, 12 interval: 1000 13 }, opt); 14 15 var _this = this; 16 var index = 0; 17 _this.find('.window li').width(_this.width()); 18 19 var animate = function(index){ 20 var win = _this.find('.window'); 21 var offset = win.parent().width(); 22 win.animate({'marginLeft': -offset * index}, opt.speed); 23 _this.find('.tab li').removeClass('select'); 24 _this.find('.tab li').eq(index).addClass('select'); 25 }; 26 27 _this.find('.tab li').mouseover(function () { 28 index = parseInt($(this).index()); 29 animate(index); 30 31 }); 32 33 _this.find('.btn li:first-child').click(function(){ 34 --index; 35 if(index < 0){ 36 index = _this.find('.window li').length - 1; 37 } 38 animate(index); 39 }); 40 41 _this.find('.btn li:last-child').click(function(){ 42 ++index; 43 if(index >= _this.find('.window li').length){ 44 index = 0; 45 } 46 animate(index); 47 }); 48 49 if(opt.auto){ 50 var time = setInterval(function(){ 51 ++index; 52 if(index >= _this.find('.window li').length){ 53 index = 0; 54 } 55 animate(index); 56 },opt.interval); 57 } 58 59 return $.each(this,function(index,ele){}); 60 }; 61 62 })(jQuery);
Html
1 <div class="slider"> 2 <ul class="btn"> 3 <li><i class=" icon-caret-left"></i></li> 4 <li><i class=" icon-caret-right"></i></li> 5 </ul> 6 <ul class="window"> 7 <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li> 8 <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li> 9 <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li> 10 <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li> 11 </ul> 12 <ul class="tab"> 13 <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li> 14 <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li> 15 <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li> 16 <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li> 17 </ul> 18 </div>
CSS
1 .slider { 2 height: 440px; 3 overflow: hidden; 4 position: relative; 5 } 6 .slider .btn li{ 7 position: absolute; 8 width: 30px; 9 height: 50px; 10 cursor: pointer; 11 color: #fff; 12 text-align: center; 13 font-size: 40px; 14 top:45%; 15 } 16 .slider .btn li:first-child { 17 18 left:0; 19 20 } 21 22 .slider .btn li:last-child { 23 24 right:0; 25 26 } 27 28 .slider img { 29 width: 100%; 30 height: 100%; 31 } 32 33 .slider .window { 34 width: 40000px; 35 height: 400px; 36 overflow: hidden; 37 } 38 39 .slider .window li { 40 float: left; 41 overflow: hidden; 42 width: 1200px; 43 } 44 45 .slider .tab { 46 position: absolute; 47 z-index: 5; 48 width: 880px; 49 margin: -40px auto; 50 left: 13%; 51 } 52 53 .slider .tab li { 54 float: left; 55 width: 200px; 56 height: 80px; 57 margin-left: 18px; 58 cursor: pointer; 59 }
Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。
Run 起来：
1 $('.slider').slider({auto: true, interval: 2000});
改进js结构：
/** * Created by Steven on 2015/07/10/0010. * @email zhuttymore@126.com */ (function ($) { $.fn.extend({ slider:function (opt) { opt = $.extend({ }, opt); //Do something here return $.each(this,function(index,ele){}); } }); })(jQuery);
OK,就这样。原创作品，转载请注明出处http://zhutty.cnblogs.com。