直接把代码复制到自己项目中即可运行，注意修改图片路径，功能不是特别完善，主要是看编程的过程，如何应用构造函数去进行插件的编程方式。
<!DOCTYPE html>
<html lang="zh"><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>轮播图</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.leftBtn{
position: absolute;
width: 30px;
height: 30px;
top: 50%;
left: 10px;
margin-top: -15px;
background: orange;
}
.rightBtn{
position: absolute;
width: 30px;
height: 30px;
top: 50%;
right: 10px;
margin-top: -15px;
background: orange;
}
.circle{
position: absolute;
bottom: 10px;
left: 100px;
list-style: none;
cursor: pointer;
}
.circle>li{
float: left;
width: 20px;
height: 20px;
background: orange;
margin-left: 20px;
}
.circle>li.cur{
background: red;
}
</style>
<body>
<div id="lunbo"></div>
<input type="text" onclick="this.type = 'password'"/>
<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function( win , $){
win.Carousel = Carousel;
//轮播图构造函数
function Carousel(JSON){
this.$dom = $("#" + JSON.id)
this.$ul = null;
this.$li = null;
this.$leftBtn = null;
this.$rightBtn = null;
this.$circleOl = null;
this.$circleList = null;
this.idx = 0;
this.animTime = JSON.animTime;
this.width = JSON.width;
this.height = JSON.height;
this.$imgLength = JSON.img.length;
this.img = JSON.img;
this.interval = JSON.interval;
//初始化
this.init();
//绑定事件监听
this.bindEvent();
//定时器自动轮播
this.autoPlay();
}
//初始化init
Carousel.prototype.init = function(){
this.$ul = $("<ul></ul>");
this.$dom.append(this.$ul);
for (var i = 0 ; i<this.$imgLength ; i++) {
$("<li><img src='" + this.img[i] + "'/></li>").appendTo(this.$ul);
}
this.$li = this.$ul.find("li");
this.$dom.css({
"width" : this.width,
"height" : this.height,
"position" : "relative",
"overflow" : "hidden"
})
this.$li.css({
"position" : "absolute",
"left" : this.width,
"top" : 0
})
this.$li.eq(0).css("left" , 0)
this.$leftBtn = $("<a href='javascript:;' class='leftBtn'></a>");
this.$rightBtn = $("<a href='javascript:;' class='rightBtn'></a>");
this.$leftBtn.appendTo(this.$dom);
this.$rightBtn.appendTo(this.$dom);
this.$circleOl = $("<ol class='circle'></ol>")
this.$circleOl.appendTo(this.$dom);
for (var i = 0 ; i<this.$imgLength ; i++) {
$("<li></li>").appendTo(this.$circleOl);
}
this.$circeList = this.$circleOl.find("li");
this.$circeList.eq(0).addClass("cur")
}
//绑定事件监听
Carousel.prototype.bindEvent = function(){
var $this =this;
//左侧按钮
this.$leftBtn.click(function(){
if($this.$li.is(":animated")){
return;
}
$this.showPrev();
})
//右侧按钮
this.$rightBtn.click(function(){
//防止恶意点击
if($this.$li.is(":animated")){
return;
}
$this.showNext();
})
//圆点点击事件
this.$circeList.click(function(){
if($this.$li.is(":animated")){
return;
}
$this.show($(this).index());
})
//鼠标放上图片停止轮播
this.$dom.mouseenter(function(){
clearInterval($this.timer)
});
this.$dom.mouseleave(function(){
$this.autoPlay()
})
}
//下一张
Carousel.prototype.showNext = function(){
this.$li.eq(this.idx).animate({"left" : - this.width} , this.animTime);
this.idx ++;
if(this.idx > this.$imgLength - 1){
this.idx = 0;
}
this.$li.eq(this.idx).css("left",this.width).animate({"left" : 0} , this.animTime);
this.changeCir();
}
//上一张
Carousel.prototype.showPrev = function(){
this.$li.eq(this.idx).animate({"left" : this.width} , this.animTime);
this.idx --;
if(this.idx < 0 ){
this.idx = this.$imgLength - 1;
}
this.$li.eq(this.idx).css("left", -this.width).animate({"left" : 0} , this.animTime);
this.changeCir();
}
//展示任意
Carousel.prototype.show = function(number){
var old = this.idx;
this.idx = number;
if(this.idx > old){
this.$li.eq(old).animate({"left" : - this.width} , this.animTime);
this.$li.eq(this.idx).css("left",this.width).animate({"left" : 0} , this.animTime);
}else if(this.idx < old){
this.$li.eq(old).animate({"left" : this.width} , this.animTime);
this.$li.eq(this.idx).css("left",- this.width).animate({"left" : 0} , this.animTime);
}
this.changeCir();
}
//小圆点跟随移动
Carousel.prototype.changeCir = function(){
this.$circeList.eq(this.idx).addClass("cur").siblings().removeClass();
}
//自动轮播
Carousel.prototype.autoPlay = function(){
var $this = this;
this.timer = setInterval(function(){
$this.showNext();
} , this.interval)
}
})(window , $)
//构造对象应用展示
var c = new Carousel({
id : "lunbo",
img : [
"img/a1.jpg",
"img/a2.jpg",
"img/a3.jpg",
"img/a4.jpg",
"img/a5.jpg"
],
width : 1200,
height : 600,
animTmie : 1000,
interval : 1000
})
</script>
</body>
</html>