轮播库

html部分

<div class="carousel" id="carousel"></div>
<div class="carousel" id="carousel2"></div>
<script type="text/javascript" src="lib/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="lib/animate-2.0.1.js"></script>
<script type="text/javascript" src="lib/carousel.js"></script>
<script type="text/javascript">
var imageArr = ['images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
new Carousel(imageArr,'carousel');
new Carousel(imageArr,'carousel2');
</script>

css部分

*{
margin: 0;
padding: 0;
}
.carousel{
width: 560px;
height: 300px;
margin: 100px auto;
border: 1px solid red;
position: relative;
overflow: hidden;
}


/*按钮*/
.btns span{
width: 40px;
height: 40px;
background-color: orange;
border-radius: 50%;
position: absolute;
top: 50%;
margin-top: -20px;
z-index: 999;
cursor: pointer;
}
.btns span:hover{
background-color: gold;
}
.leftBtn{
left: 10px;
}
.rightBtn{
right: 10px;
}


/*图片展示*/
.carousel .m_unit{
width: 5000px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
.carousel .m_unit ul{
list-style: none;
}
.carousel .m_unit ul li{
width: 560px;
height: 300px;
float: left;
}


/*焦点*/
.circles{
width: 150px;
height: 16px;
position: absolute;
bottom: 10px;
right: 10px;
}
.circles ol{
list-style: none;
}
.circles ol li{
width: 16px;
height: 16px;
border-radius: 50%;
background-color: orange;
float: left;
margin-left: 6px;
opacity: .8;
cursor: pointer;
}
.circles ol li.current{
background-color: red;

}

js部分  carousel.js

(function () {
window.Carousel = Carousel;
function Carousel(imageLis,boxId) {
//属性
//全局信号量
this.index = 0;
//图片的数量
this.length = imageLis.length;
//放进大盒子
this.box = $('#'+boxId);
this.imageLis = imageLis;
this.width = 0;
//定时器
this.interval = 2000;
this.timer = null;
//截流
this.lock = true;
//三个元素
this.m_unit = null;
this.leftBtn = null;
this.rightBtn = null;
this.circles = null;


//初始化
this.init();


//事件绑定
this.bindevent();
}
//初始化
Carousel.prototype.init = function () {
//大火车
this.m_unit = $('<div class="m_unit" id="m_unit"></div>').appendTo(this.box);
//大火车中的ul
var m_ul = $('<ul class="m_ul"></ul>').appendTo(this.m_unit);
//ul中的li
this.imageLis.forEach(function (item,idx,arr) {
var li = $("<li></li>").appendTo(m_ul);
var a = $('<a href=""></a>').appendTo(li);
$('<img src="'+item+'" alt="" />').appendTo(a);
});
//单独造一个li,轮播的猫腻
var li = $("<li></li>").appendTo(m_ul);
var a = $('<a href=""></a>').appendTo(li);
$('<img src="'+this.imageLis[0]+'" alt="" />').appendTo(a);


//轮播一步走多远
this.width = li.width();


//左右按钮
var btns = $('<div class="btns"></div>').appendTo(this.box);
this.leftBtn = $('<span class="leftBtn"></span>').appendTo(btns);
this.rightBtn = $('<span class="rightBtn"></span>').appendTo(btns);


//焦点
this.circles = $('<div class="circles"></div>').appendTo(this.box);
var ol = $('<ol></ol>').appendTo(this.circles);
for (var i = 0; i < this.length; i++) {
var oli = $('<li></li>').appendTo(ol);
if (i==0) {
oli.addClass('current');
}
}

}
//焦点切换的方法
Carousel.prototype.changeCircles = function () {
//做一个信号量的副本
var num = this.index;


//判断当前信号量num是不是下标为最后一项图片
//如果是最后一张图片,num=0,也就是说小圆点展示小标为0的哪一个
if (num == this.length) {
num = 0;
}
//排他思想
this.circles.find('li').eq(num).addClass('current').siblings().removeClass('current');
}
//绑定事件
Carousel.prototype.bindevent = function () {
// 备份
var self = this;
//左按钮点击
this.leftBtn.click(function() {

if (self.lock==false) {
return;
}
self.lock=false;
self.handler('left');
})
//右按钮点击
this.rightBtn.click(function() {
if (self.lock==false) {
return;
}
self.lock=false;
self.handler('right');

})
//焦点点击
this.circles.find('li').click(function() {
if (self.lock==false) {
return;
}
self.lock=false;
self.circlesHandler($(this).index());
clearInterval(self.timer);

})
//自动轮播
self.timer=setInterval(function () {


if (self.lock==false) {
return;
}
self.lock=false;
self.handler('right');
},self.interval)
//鼠标放上去轮播停
this.box.mouseover(function () {
clearInterval(self.timer);
})
this.box.mouseout(function () {
clearInterval(self.timer);
self.timer = setInterval(function () {
self.handler('right');
},self.interval);
})
}



//左右按钮点击事件
Carousel.prototype.handler = function (btn) {
var self = this;
if(btn == 'left'){
this.index--;
if (this.index<0) {
//信号量转移到最后一张图片下标
this.index = this.length;
//大火车瞬间滚动到最后
this.m_unit.css('left',-this.width*this.index);
this.index--;
}
}else if (btn == 'right') {
this.index++;
if (this.index > this.length) {
//信号量转移到最后一张图片下标
this.index = 0;
//大火车瞬间滚动到最后
this.m_unit.css('left',0);
this.index++;
}
}
//图片开始变化
animate(this.m_unit[0],{'left':-this.width * this.index},600,'BackEaseOut',function () {
//回调 节流
self.lock=true;
})
//小圆点发生变化
this.changeCircles();
}
//小圆点封装
Carousel.prototype.circlesHandler = function (idx) {
var self = this;
// 改变信号量
this.index = idx;
//图片动
animate(this.m_unit[0],{'left':-this.width * this.index},600,'BackEaseOut',function () {
//回调 节流
self.lock=true;
})
//小圆点发生变化
this.changeCircles();

}
})();