jquery实现图片轮播图插件

<div class="wrapper" id="wrap">
	<img src="./img/1.png" alt="">
	<img src="./img/2.png" alt="">
	<img src="./img/3.png" alt="">
	<img src="./img/4.png" alt="">
	<img src="./img/5.png" alt="">
</div>
<script src="./jquery-1.11.0.min.js"></script>
<!-- 封装插件 -->
<script src="1.js"></script>
<!-- 调用插件 -->
<script>
	$('#wrap').slider({
		curDisplay:0,
		autoPlay:true,
		interval:2000
	})

css样式

*{

	margin: 0;
	padding: 0;
	/*图片之间没有空隙*/
	font-size: 0;

}
.wrapper{

	position: relative;

	transform-style:preserve-3d;
 
	perspective: 800px;
	height: 200px;
	margin-top: 200px;

}
.wrapper img{

position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
border-radius: 15px;
transition: transform 0.8s ease-in-out;

}

js部分

(function($){
//实现功能
function Slider(ele,opt){

var d = {
	curDisplay:0,
	autoPlay:true,
	interval:2000
}; 

this.opts = $.extend({},d,opt);
this.wrap = ele;
this.curDisplay = this.opts.curDisplay;
this.$img = this.wrap.find('img');
this.imgLen =this.$img.length;
this.nowIndex = 0;
this.autoPlay = this.opts.autoPlay;
this.timer = null;
this.interval = this.opts.interval;
this.init();

}
Slider.prototype.init = function(){

this.initMove();
this.bindEvent();

}
Slider.prototype.initMove = function(){

ar self = this;

var hLen = Math.floor(self.imgLen/2);
var lNum,rNum;

for (var i = 0; i <hLen; i++) {
 
	lNum = self.curDisplay -i -1;

	self.$img.eq(lNum).css({
		 
		transform:'translateX(' + (-150 * (i +1)) + 'px) translateZ(' + (200 - i * 100) +'px) rotateY(30deg)'
	})
	rNum = self.curDisplay +i +1;
	self.$img.eq(rNum).css({
		transform:'translateX(' + (+150 * (i +1)) + 'px) translateZ(' + (200 - i * 100) +'px) rotateY(-30deg)'
	})
}
self.$img.eq(self.curDisplay).css({
	transform:'translateZ(300px)'
})

}
Slider.prototype.bindEvent = function(){

var self = this;

self.$img.on('click',function(){

	self.nowIndex = $(this).index();

	self.moving(self.nowIndex);
 }).hover(function(){
	clearInterval(self.timer);
},function(){
	self.timer = setInterval(function(){
		self.play();
	},self.interval);

});

this.timer = setInterval(function(){
	self.play();
},this.interval);

}

Slider.prototype.moving = function(index){

this.curDisplay = index;
this.initMove();

}

Slider.prototype.play = function(){

if (this.autoPlay) {

	if (this.nowIndex == this.imgLen - 1) {
	 
		this.nowIndex = 0;
	}else{
	 
		this.nowIndex++;
    }
	this.moving(this.nowIndex);
}

}
// 扩展插件

$.fn.extend({

slider:function(options){
	new Slider(this,options);
}

})
})(jQuery)