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

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