// 获取banner图的包裹
var bannerlist = document.getelementsbyclassname("banner_list")[0];
// 获取banner图中图片的列表
var banneritems = bannerlist.getelementsbytagname("li");
// 获取banner图的切换按钮
var bannerbuttonleft = document.getelementsbyclassname("banner_pre_button")[0];
var bannerbuttonright = document.getelementsbyclassname("banner_next_button")[0];
// 把banner图列表的第一张图片克隆放在列表序列的最后一个
var clonefirst = banneritems[0].clonenode(true);
bannerlist.appendchild(clonefirst);
// 根据图片的数量来决定banner图包裹的宽度(width)
bannerlist.style.width = banneritems.length * 100 + "vw";
var bannerindex = 0;
var intervaltime = 5200;

function bannerautomove() {
	bannerindex++;
	if (bannerindex >= banneritems.length) {
		bannerlist.style.transitionduration = "0s";
		bannerlist.style.transform = "translatex(0vw)"
		bannerindex = 1;
		bannerlist.offsetleft;
	}
	bannerlist.style.transitionduration = "0.82s";
	bannerlist.style.transform = "translatex(" + (-100 * bannerindex) + "vw)";
}

function bannergopre() {
	bannerindex--;
	if (bannerindex < 0) {
		bannerlist.style.transitionduration = "0s";
		bannerlist.style.transform = "translatex(" + (-100 * (banneritems.length - 1)) + "vw)"
		bannerindex = banneritems.length - 2;
		bannerlist.offsetleft;
	}
	bannerlist.style.transitionduration = "0.82s";
	bannerlist.style.transform = "translatex(" + (-100 * bannerindex) + "vw)";
}
var bannerautomovetimer = setinterval(bannerautomove, intervaltime);
bannerbuttonright.addeventlistener("click", function() {
	clearinterval(bannerautomovetimer);
	bannerautomove();
	bannerautomovetimer = setinterval(bannerautomove, intervaltime);
})
bannerbuttonleft.addeventlistener('click', function() {
	clearinterval(bannerautomovetimer);
	bannergopre();
	bannerautomovetimer = setinterval(bannerautomove, intervaltime);
})