[原创作品]轮播焦点图插件的实现

　　在上上一期写了怎么写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 [email protected]
 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});

OK,就这样。原创作品，转载请注明出处。