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

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

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

(function($){
    //各种默认的属性参数
    var defaults = {
        width: 400,
        height: 200,
        direction:'left',
        imgs:[{
            src:'p0.jpg',
            link:'http://www.cnblogs.com/bikeway'
        },{
            src:'p1.jpg',
            link:'http://www.cnblogs.com/bikeway'
        },{
            src:'p2.jpg',
            link:'http://www.cnblogs.com/bikeway'
        }]
    }
    
    //提供插件唯一可调用的接口slideImg
    $.fn.slideImg = function(options){
        options = $.extend({},defaults,options);
        return this.each(function(){
            init($(this),options);
        })
    };
})(jQuery);

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

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

但也可以这样写：

$.fn.slideImg = function(options){

　　this.each(funciton){

　　//code........

　　}

}

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

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

function init(obj,options){
        var imgs = "<div class='imgBox'>",
            tips = "<div class='tipBox'>",
            len = options.imgs.length;
        for(var i = 0; i < len; i++){
            if(options.imgs[i].link){
                imgs += "<a href='"+options.imgs[i].link+"'>";
                imgs += "<img src='"+options.imgs[i].src+"'/>"; 
                imgs += "</a>";
            }else{
                imgs += "<img src='"+options.imgs[i].src+"'/>"; 
            }
            tips += "<a href='javascript:void(0)'></a>"
        }
        imgs += "</div>";
        tips += "</div>";
        
        $(obj).append(imgs).append(tips);
　　　　 $('.tipBox a').eq(0).addClass('current');
         $(obj).css({
             'width':options.width,
             'height':options.height
        });

         $('.imgBox a').css({
             'width':options.width,
             'height':options.height
         });

         $('.imgBox img').css({
             'width':options.width,
             'height':options.height
         });

        $('.tipBox').css({
            'left':(options.width - 11 * len - 10) / 2
        })

        if(options.direction == 'top' || options.direction == 'bottom'){
            $('.imgBox a').css({
                'display':'block'
            })
            $('.imgBox').css({
                'width':'100%',
                 'height':options.height * len
            })
        }else{
            $('.imgBox').css({
                'width':options.width * len,
                'height':'100%'
            })
        }


        var dir = options.direction;
        switch(dir){
            case 'top':{
                setInterval(function(){autoSlideTop(options)},3000);
                break;
            }
            case 'right':{
                setInterval(function(){autoSlideRight(options)},3000);
                break;
            }
            case 'bottom':{
                setInterval(function(){autoSlideBottom(options)},3000);
                break;
            }
            case 'left':{
                setInterval(function(){autoSlideLeft(options)},3000);
                break;    
            }
        }
    }

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

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

        var index = 0;
        function autoSlideLeft(options){ 
        if($('.imgBox').position().left == -options.width * (options.imgs.length - 1)){
            index = 0;
            $('.imgBox').animate({left: '0'},1000);
            $('.tipBox a').each(function(i){
                if (index == i) {
                    $(this).addClass('current'); 
 9                 }else{
                    $(this).removeClass('current');
                }
            })
        }else{
            index++;
            $('.imgBox').animate({left: "-="+options.width,},1000);
            $('.tipBox a').each(function(i){
                if (index == i) {
                    $(this).addClass('current');
                }else{
                    $(this).removeClass('current');
                }
            })
        }
    }

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

效果图：滚动时截图：

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

demo