// 定义一个函数对象
function Banner() {
// 这里可以设置对象的属性
// 设置默认的index,index为想要运动起来的元素的个数,此处为图片的个数,有4张图片
this.index = 0;
this.bannerGroup = $("#banner-group");
this.listenBannerGroupHover();
}
// 轮播图运动的函数
Banner.protype.loop = function() {
// 使用#获取html中id为banner-ul的元素,之后就可以将其运动起来
var bannerUl= $("#banner-ul");
var self = this;
setIntervel(function(){
if(self.index >= 3){
self.index = 0;
}else{
self.index++;
}
bannerUl.animate({"left":-900*self.index},500);
},2000);
};
// 定义监听鼠标是否移动到轮播图之上的函数
Banner.listenBannerGroupHover = function() {
var self = this;
this.bannerGroup.hover(function() {
clearInterval(self.timer);
},function () {
self.loop();
});
};
// run方法,轮播图运动起来的主入口
Banner.protype.run = function() {
self.loop();
};
// $()函数会在文档中所有元素都加载完毕之后才会执行里面的代码
$(function() {
// new一个对象,该对象含有上面定义的Banner()函数中所有的属性
var banner = new Banner();
// 在所有的元素加载完毕之后,轮播图就会执行run()方法
banner.run();
});