【图片轮播特效插件】--- 效果实现

忙了一段时间，终于能好好静下来写这篇博文了，那废话就不多说，直接开始吧。

按照上一篇对于jQuery插件的学习掌握，首先就是搭好一个合适的框架，定好插件中需要用到的属性，给其他使用者留出使用接口：

 1 (function($){

 2     //各种默认的属性参数

 3     var defaults = {

 4         width: 400,

 5         height: 200,

 6         direction:'left',

 7         imgs:[{

 8             src:'p0.jpg',

 9             link:'http://www.cnblogs.com/bikeway'

10         },{

11             src:'p1.jpg',

12             link:'http://www.cnblogs.com/bikeway'

13         },{

14             src:'p2.jpg',

15             link:'http://www.cnblogs.com/bikeway'

16         }]

17     }

18     

19     //提供插件唯一可调用的接口slideImg

20     $.fn.slideImg = function(options){

21         options = $.extend({},defaults,options);

22         return this.each(function(){

23             init($(this),options);

24         })

25     };

26 })(jQuery);

这里我默认了插件显示时的宽、高、滚动方向以及三张图片(图片默认链接到我的博客首页)

这里需要说的是return this.each(function(){......}),

但也可以这样写：

$.fn.slideImg = function(options){

　　this.each(funciton){

　　//code........

　　}

}

这里我比较喜欢以及推荐第一种写法，因为jQuery有一个很棒的特点就是可以进行方法级联，我们应该始终在方法中返回一个元素。并且每一方法块都能很好的区分开，代码看起也很舒服。

然后便是初始化写好的插件

 1 function init(obj,options){

 2         var imgs = "<div class='imgBox'>",

 3             tips = "<div class='tipBox'>",

 4             len = options.imgs.length;

 5         for(var i = 0; i < len; i++){

 6             if(options.imgs[i].link){

 7                 imgs += "<a href='"+options.imgs[i].link+"'>";

 8                 imgs += "<img src='"+options.imgs[i].src+"'/>"; 

 9                 imgs += "</a>";

10             }else{

11                 imgs += "<img src='"+options.imgs[i].src+"'/>"; 

12             }

13             tips += "<a href='javascript:void(0)'></a>"

14         }

15         imgs += "</div>";

16         tips += "</div>";

17         

18         $(obj).append(imgs).append(tips);

19 　　　　 $('.tipBox a').eq(0).addClass('current');

20          $(obj).css({

21              'width':options.width,

22              'height':options.height

23         });

24 

25          $('.imgBox a').css({

26              'width':options.width,

27              'height':options.height

28          });

29 

30          $('.imgBox img').css({

31              'width':options.width,

32              'height':options.height

33          });

34 

35         $('.tipBox').css({

36             'left':(options.width - 11 * len - 10) / 2

37         })

38 

39         if(options.direction == 'top' || options.direction == 'bottom'){

40             $('.imgBox a').css({

41                 'display':'block'

42             })

43             $('.imgBox').css({

44                 'width':'100%',

45                  'height':options.height * len

46             })

47         }else{

48             $('.imgBox').css({

49                 'width':options.width * len,

50                 'height':'100%'

51             })

52         }

53 

54 

55         var dir = options.direction;

56         switch(dir){

57             case 'top':{

58                 setInterval(function(){autoSlideTop(options)},3000);

59                 break;

60             }

61             case 'right':{

62                 setInterval(function(){autoSlideRight(options)},3000);

63                 break;

64             }

65             case 'bottom':{

66                 setInterval(function(){autoSlideBottom(options)},3000);

67                 break;

68             }

69             case 'left':{

70                 setInterval(function(){autoSlideLeft(options)},3000);

71                 break;    

72             }

73         }

74     }

这段代码中我省略了许多为滚动标记设置样式的代码，只设置了不影响插件效果所必须的样式（而且我喜欢用jQuery的方式设置样式，而不是写在标签里，我觉得这样修改会较为方便）。在demo中我会单独写个slideImg.css文件，作为这个插件的默认样式。

最后便是关键的效果实现部分，这里我贴出的代码只包含了向左滚动的部分

 1         var index = 0;

 2         function autoSlideLeft(options){ 

 3         if($('.imgBox').position().left == -options.width * (options.imgs.length - 1)){

 4             index = 0;

 5             $('.imgBox').animate({left: '0'},1000);

 6             $('.tipBox a').each(function(i){

 7                 if (index == i) {

 8                     $(this).addClass('current'); 
 9                 }else{

10                     $(this).removeClass('current');
11                 }

12             })

13         }else{

14             index++;

15             $('.imgBox').animate({left: "-="+options.width,},1000);

16             $('.tipBox a').each(function(i){

17                 if (index == i) {

18                     $(this).addClass('current');
19                 }else{

20                     $(this).removeClass('current');
21                 }

22             })

23         }

24     }

到此滚动插件已经初步完成，实现了上篇随笔定下的三个功能，下一篇我希望能优化下代码，再加上touch事件。

效果图：滚动时截图：

最后附上本次实现的【图片轮播特效插件】

demo