js操作轮播图(图片)运动起来

// 定义一个函数对象
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();
});
上一篇:thinkphp5.0 定义api版本号


下一篇:使用Promise封装wx.request()