这篇文章主要为大家详细介绍了基于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);

Html

<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>

CSS

.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;

}

Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。

Run 起来：

$('.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);

以上就是本文的全部内容，希望对大家学习jqueryt程序设计有所帮助。