基于jquery实现轮播焦点图插件

 /** * Created by Steven on 2015/07/10/0010. * @email zhuttymore@126.com */  (function ($) {   $.fn.slider = function (opt) {   opt = $.extend({    speed:'fast',    auto: false,    interval: 1000   }, opt);    var _this = this;   var index = 0;   _this.find('.window li').width(_this.width());    var animate = function(index){    var win = _this.find('.window');    var offset = win.parent().width();    win.animate({'marginLeft': -offset * index}, opt.speed);    _this.find('.tab li').removeClass('select');    _this.find('.tab li').eq(index).addClass('select');   };    _this.find('.tab li').mouseover(function () {    index = parseInt($(this).index());    animate(index);    });    _this.find('.btn li:first-child').click(function(){    --index;    if(index < 0){     index = _this.find('.window li').length - 1;    }    animate(index);   });    _this.find('.btn li:last-child').click(function(){    ++index;    if(index >= _this.find('.window li').length){     index = 0;    }    animate(index);   });    if(opt.auto){    var time = setInterval(function(){     ++index;     if(index >= _this.find('.window li').length){      index = 0;     }     animate(index);    },opt.interval);   }    return $.each(this,function(index,ele){});  }; })(jQuery);

 <div class="slider">   <ul class="btn">    <li><i class=" icon-caret-left"></i></li>    <li><i class=" icon-caret-right"></i></li>   </ul>   <ul class="window">    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li>    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li>    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li>    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li>   </ul>   <ul class="tab">    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li>    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li>    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li>    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li>   </ul>  </div>

 .slider {  height: 440px;  overflow: hidden;  position: relative; } .slider .btn li{  position: absolute;  width: 30px;  height: 50px;  cursor: pointer;  color: #fff;  text-align: center;  font-size: 40px;  top:45%; } .slider .btn li:first-child {   left:0;  }  .slider .btn li:last-child {   right:0;  }  .slider img {  width: 100%;  height: 100%; }  .slider .window {  width: 40000px;  height: 400px;  overflow: hidden; }  .slider .window li {  float: left;  overflow: hidden;  width: 1200px; }  .slider .tab {  position: absolute;  z-index: 5;  width: 880px;  margin: -40px auto;  left: 13%; }  .slider .tab li {  float: left;  width: 200px;  height: 80px;  margin-left: 18px;  cursor: pointer; }

/** * 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);