基于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 herereturn $.each（this,function（index,ele）{}）;} }）;}）（jQuery）;

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