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

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

改进js结构：

/**

 * Created by Steven on 2015/07/10/0010.

 * @email [email protected]

 */



(function ($) {



    $.fn.extend({

        slider:function (opt) {

            opt = $.extend({

              

            }, opt);

           //Do something here

         

            return $.each(this,function(index,ele){});

        }

    });



})(jQuery);

 

OK,就这样。原创作品，转载请注明出处http://zhutty.cnblogs.com。