利用jQuery封装轮播图插件

(function($){
	function Slider(option) {
		this.timer = null;
		this.key = true;
		this.opts = option || {};
		this.wrap = this.opts.father;
		this.len = this.opts.image.length;
		this.init(); //入口函数
		this.index = 0;
	}
	
	Slider.prototype.init = function () {
		this.createDom();
		this.bindEvent();
		this.autoMove();
	}

// 创建DOM结构
	Slider.prototype.createDom = function () {
		var that = this;
		var sliderPage = $('<ul class="sliderPage"></ul>');
		var sliderIndex = $('<div class="sliderIndex"></div>');
		var sliderBtn = $('<div class="btn leftBtn"><</div>\
        <div class="btn rightBtn">></div>');
        var imgStr = '';
        var spanStr = '';
        for(var i = 0; i < that.len; i ++){
        	imgStr += '<li>\
                <img src="' + that.opts.image[i] + '">\
            </li>';
            spanStr += '<span></span>';
        }
        imgStr += '<li>\
                <img src="' + that.opts.image[0] + '">\
            </li>';
        that.wrap.addClass('sliderBox');
        that.wrap.append(sliderPage.html(imgStr))
        	.append(sliderBtn)
        	.append(sliderIndex.html(spanStr));
        sliderIndex.find($('span:first')).addClass('active');
        that.w = that.wrap.width();
        that.h = that.wrap.height();
        $('.sliderPage').css({'width' : (that.len + 1) * that.w , 'height' : that.h});
        $('.sliderPage li').css({'width' : that.w , 'height' : that.h});

	}

// 给按钮和小圆点添加点击事件
	Slider.prototype.bindEvent = function () {
		var that = this;
		$('.btn').add($('.sliderIndex span')).on('click', function(){
			if($(this).hasClass('leftBtn')){ 
				that.startMove('left');
			}else if($(this).hasClass('rightBtn')){
				that.startMove('right');
			}else{
				// console.log(that.index);
				that.index = $('.sliderIndex span').index(this);
				that.startMove(that.index);
			}
		})
	}

// 开启一个定时器，每2秒移动一次，实现轮播
	Slider.prototype.autoMove = function () {
		clearTimeout(this.timer);
		var that = this;
		that.timer = setTimeout(function(){
			that.startMove();
		}, 2000)
	}
    

// 利用index索引值改变.sliderPage的left值，实现移动
	Slider.prototype.startMove = function (dir) {
		// console.log(dir);
		var that = this;
		// console.log(that.key);
		if(that.key){
			that.key = false;
			if(dir == undefined || dir == 'right'){
				if(that.index == that.len - 1){
					that.index = 0;
					$('.sliderPage').animate({'left': - that.len * that.w}, function(){
						$('.sliderPage').css('left', 0);
						// that.key = true;
					})
				}else{
					that.index ++;
				}
			}else if(dir == 'left'){
				if(that.index == 0){
					$('.sliderPage').css('left', - that.w * that.len);
					that.index = that.len - 1;
				}else{
					that.index --;
				}
			}else{
					that.index = dir;
				}
		}
		$('.sliderPage').animate({'left' : - that.index * that.w }, function(){
			that.autoMove();
			that.key = true;
		});
		that.changeStyle(that.index);
		// console.log(that.key);
	}

   // 改变小圆点的样式
	Slider.prototype.changeStyle = function(index) {
		$('.sliderIndex span.active').removeClass('active');
		$('.sliderIndex span').eq(index).addClass('active');
	}

// 利用jQuery的extend方法添加一个插件
	$.fn.extend({
		sliderImg : function(option){
			option.father = this || $('body'); //获取要插入的轮播图的父级元素
			new Slider(option); //返回一个对象 利用面向对象的方式实现轮播图插件
		}
	});

// 调用封装的插件
	$('.sliderBox').sliderImg({
		image : ['img/yidali8.jpg', 'img/yidali5.jpg', 'img/yidali6.jpg','img/yidali7.jpg', 'img/yidali9.jpg']
	})
}(jQuery))

CSS代码：

*{
	padding: 0;
	margin: 0;
	list-style: none;
	text-decoration: none;
}
.sliderBox {
	position: relative;
	width: 418px;
	height: 269px;
	margin: 50px auto;
	overflow: hidden;
}
.sliderBox .sliderPage{
	/*width: 2600px;
	height: 269px;*/
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0;
}
.sliderBox .sliderPage li{
	display: inline-block;
	/*width: 418px;
	height: 269px;*/
}
.sliderBox .sliderPage li img{
	width: 100%;
	height: 100%;
}
/*轮播图按钮样式*/
.sliderBox .btn{
	position: absolute;
	top: 50%;
	height: 40px;
	margin-top: -20px;
	background-color: #ccc;
	font-size: 30px;
	line-height: 40px;
	/*text-align: center;*/
	cursor:pointer;
	opacity: 0;
}
.sliderBox:hover .btn{
	opacity: 0.8;
}
.sliderBox .leftBtn{
	width: 40px;
	left: 0;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	text-align: left;
}
.sliderBox .rightBtn{
	width: 40px;
	right: 0;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	text-align: right;
}
/*轮播图小圆点样式*/
.sliderBox .sliderIndex{
	position: absolute;
	bottom: 20px;
	/*top: 90%;*/
	left: 0;
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
	z-index: 10;
}
.sliderBox .sliderIndex span{
	display: inline-block;
	border-radius: 50%;
	width: 8px;
	height: 8px;
	margin-right: 5px;
	background-color: #fff;
}
.sliderBox .sliderIndex span.active{
	background-color: red;
}