css3+html5滚图片

sp.js

function bindScrollEvent(name) {
	var mainEle = document.getElementById(name);
	var blockItems = mainEle.getElementsByClassName("blockButton");
	var osd = mainEle.getElementsByClassName("outSide");
	
	var sw = Math.min(mainEle.offsetWidth,414);//计算宽度
	var lineItems = 4;//一屏显示最多四个
	var subWidth = (sw-lineItems)/lineItems;
	for(var i=0; i<blockItems.length; i++) {//设置宽度
		(blockItems[i]).style.width = sw + "px";
		
		var lis = $(blockItems[i]).find("li");
		for (var j=0; j<lis.length; j++) {
			(lis[j]).style.width = subWidth + "px";
			$(lis[j]).addClass("split");
			$(lis[j]).addClass("split-underLine");
		}
	}
	if(blockItems.length <= 1) {
		osd[0].style.width = "100%";
		return;
	}
	//复制第一个 和最后一个区域，作为缓冲动画
	var addBengin = blockItems[blockItems.length-1].outerHTML;
	var addEnd = blockItems[0].outerHTML;
	osd[0].insertAdjacentHTML("afterBegin", addBengin);//将最后一个区域，插入第一区域之前
	osd[0].insertAdjacentHTML("beforeEnd", addEnd);//将第一区域，插入最后区域之后
	osd[0].style.width = blockItems.length * (sw) + "px";
	osd[0].style.webkitTransform = "translate3d(-"+ (sw) +"px, 0px, 0px)";
	var oss = mainEle.getElementsByClassName("outSide");
	var ctrls = mainEle.getElementsByClassName("block-ctrls");
	if(ctrls.length > 0) {
		ctrls[0].innerH