jQuery图片无缝轮播插件；

图片轮播这种效果在web开发中看常见，网上的插件也有很多，最近在整理项目的过程中，把之前的图片轮播效果整合了一下，整理成一个可调用的插件以做记录，也方便更多前端爱好者来学习使用；

图片的轮播原理很简单，无非是动画改变需要运动元素的top、left等值；先来看插件的基本代码：

/**
 * Created by jone on 2016/5/3.
 */
(function($){
        $.fn.slider=function(options){
                var defaults={
                        width:1000,
                        height:300,
                        autoPlay: true,
                        sliderArrow: true,
                        sliderBar: true,
                        speed: 3000,
                        effect: 'horizontal',
                        responsive: false ,
                        callback: function() {},

                }
                var obj = $.extend(defaults, options);
                var index=0;
                var timer=null;
                
                this.each(function(index, el) {
                        var me = $(this);
                        if (obj.responsive) {
                                var parent = me.parent();
                                me.css('width', parent.width())
                                me.children("ul").find("li").css('width', me.width())
                        } else {
                                me.css({
                                        width: obj.width,
                                        height: obj.height,
                                })
                                me.children("ul").find("li").css({
                                        width: obj.width,
                                        height: obj.height,
                                })
                        }
                        var li_width = me.children("ul").find("li").width();
                        var li_height = me.children("ul").find("li").height();
                        var li_length = me.children("ul").find("li").length;

                        me.children("ul").css({
                                position: 'absolute',
                                left: 0,
                                top: 0,
                                width: li_width * li_length
                        })
                        me.children("ul").find("li").css("float","left"); 
                        if (obj.sliderArrow) {
                                var btn = "<span class='btn prev'><</span>" + '' + "<span class='btn next'>></span>"
                                me.append(btn);
                                me.find(".btn").hide();
                                me.find(".prev").click(function() {
                                        index--;
                                        if (index < 0) {
                                                index = li_length - 1
                                        }
                                        moveIndex(index);
                                })
                                me.find(".next").click(function() {
                                        index++;
                                        if (index > li_length - 1) {
                                                index = 0
                                        }
                                 
                                        moveIndex(index);

                                })
                        };
                        if (obj.sliderBar) {
                                var bar = "<em class='bar'></em>";
                                me.append(bar);
                                for (var i = 0; i < li_length; i++) {
                                        me.find('.bar').append('<i></i>')
                                };
                                me.find('.bar i').eq(0).addClass('on');
                                me.find('.bar').css('marginLeft', -me.find('.bar').outerWidth() / 2);
                                me.find('.bar i').on("mouseenter", function() {
                                        index = $(this).index();
                                        moveIndex(index)
                                })
                        };
                        if (obj.autoPlay) {
                                clearInterval(timer)
                                timer = setInterval(autoMove, obj.speed);
                        }

                        me.hover(function() {
                                clearInterval(timer);
                                me.find(".btn").fadeIn();
                        }, function() {
                                me.find(".btn").fadeOut();
                                if (obj.autoPlay) {
                                        timer = setInterval(autoMove, obj.speed);
                                } else {
                                        return
                                }
                        });

                        function autoMove() {
                                index++;
                                if (index > li_length - 1) {
                                        index = 0
                                }
                                moveIndex(index);
                        };

                        function moveIndex(index) {
                                switch(obj.effect.toLowerCase()) {
                                        case 'horizontal':
                                                me.children("ul").stop(true, true).animate({left: -index * li_width}, 800);
                                                me.find('.bar i').eq(index).addClass('on').siblings().removeClass('on');
                                                break;
                                        case 'vertical':
                                                me.children("ul").width(li_width);
                                                me.children("ul").find("li").css("float","none");
                                                me.children("ul").stop(true, true).animate({top: -index * li_height}, 800);
                                                me.find('.bar i').eq(index).addClass('on').siblings().removeClass('on');
                                                break;
                                        case 'fade':
                                                me.children("ul").width(li_width);
                                                me.children("ul").find("li").css({
                                                        float:'none',
                                                        position:'absolute',
                                                        left:0,
                                                        top:0,
                                                });
                                                me.children("ul").find("li").eq(index).fadeIn().siblings().fadeOut();
                                                me.find('.bar i').eq(index).addClass('on').siblings().removeClass('on');
                                                break;
                                }
                        }
                });
        }
})(jQuery)

插件的调用：

$("#slider1").slider({
        effect:'fade',
        width:730,
        height:454
});

插件基本API：

width:1000,             // 滚动容器宽；
height:300,             // 滚动容器高；
autoPlay: true,         // 默认开启自动滚动；
sliderArrow: true,      // 默认开启左右切换箭头；
sliderBar: true,        // 默认开启分页切换栏目；
speed: 3000,            // 速度；
effect: 'horizontal',   // 轮播效果，默认水平，有horizontal、vertical、fade供选择；
responsive: false ,     // 响应式，默认不开启；
callback: function() {},// 回调函数； 

直接来看DEMO吧：http://codepen.io/jonechen/pen/reQqGK

插件下载：https://files.cnblogs.com/files/jone-chen/jquery.slider.js.zip