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].innerHTML = "<ul></ul>";
		var innerUL = ctrls[0].getElementsByTagName("ul");
		var base = Math.floor((blockItems.length-2) / 2);
		for (var i=0; i<blockItems.length-2; i++) {
			var li = document.createElement("li");
			innerUL[0].appendChild(li);
		}
	}
	var curIndex = 1;//当前索引
	var deltaX = 0;//将显示的区域置为第一页
	resetCtrls(curIndex);
	osd[0].addEventListener("touchstart",function(e){
		var touch = e.touches[0];
        startPosition = {
            x: touch.clientX,
            y: touch.clientY
        },
        basePosition = {
        	x: touch.clientX,
            y: touch.clientY
        }
        oss[0].style.webkitTransitionDuration ="0s";
        mainEle.addEventListener("touchend", resetPanel, false);
        osd[0].addEventListener("webkitTransitionEnd", resetPanel, false);
	},false);
	
	mainEle.addEventListener("touchmove", function(e){
		e.preventDefault();
		var touch = e.touches[0];
        endPosition = {
            x: touch.clientX,
            y: touch.clientY
        }
		deltaX = endPosition.x - basePosition.x;
      	var wtf = oss[0].style.webkitTransform;
      	wtf = oss[0].style.webkitTransform.replace(" ","");
      	var swtf = wtf.indexOf("(");
      	var ewtf = wtf.indexOf("px");
    	var curX = new Number(wtf.substr(swtf+1, ewtf-swtf-1));
     	curX+=(endPosition.x - startPosition.x);
       	oss[0].style.webkitTransform = "translate3d("+ curX +"px, 0px, 0px)";
       	startPosition.x = endPosition.x;
	},false);
	
	function resetPanel() {
		if(Math.abs(deltaX) >= (sw/3.5)) {
			if(deltaX > 0 ) { // right
				curIndex--;
			} else if (deltaX < 0) {//left
				curIndex++;
			}
		}
		
		oss[0].style.webkitTransitionDuration =".4s";
		oss[0].style.webkitTransform = "translate3d(-"+ (curIndex * sw) +"px, 0px, 0px)";
		
		if(curIndex >= blockItems.length-1) {
			curIndex = 1;
			setTimeout(function(){
				oss[0].style.webkitTransitionDuration ="0s";
				oss[0].style.webkitTransform = "translate3d(-"+(curIndex * sw)+"px, 0px, 0px)";
			},605);
		} else if (curIndex == 0){
			curIndex = blockItems.length-2;
			setTimeout(function(){
				oss[0].style.webkitTransitionDuration ="0s";
				oss[0].style.webkitTransform = "translate3d(-"+(curIndex * sw)+"px, 0px, 0px)";
			},405);
		}
		resetCtrls(curIndex);
		
		mainEle.removeEventListener("touchend",resetPanel,true);
		osd[0].removeEventListener("webkitTransitionEnd",resetPanel,false);
		deltaX = 0;
	}
	
	function resetCtrls(curIndex) {
		if(ctrls.length > 0) {
			var li = ctrls[0].getElementsByTagName("li");
			for(var i=0; i<li.length; i++){
				if(i == curIndex-1) {
					li[i].className = "current";
				} else {
					li[i].className = "";
				}
			}
		}
	}
};

sp.css

.blockArea{
	text-align: right;
	width: 100%;
	max-width: 414px;
	min-width: 320px;
}
.blockArea div,ul,li,h4 {
	margin: 0;
	padding: 0;
}
.blockArea .outSide {
	width: 1000%;
	height: 120px;
}
.blockButton {
	min-width: 319px;
	max-width: 768px;
	width: 100%;
	#float: left;
	list-style:none;
	height: 120px;
}
.block-ctrls {
	width: 100%;
	height: 12px;
	line-height: 12px;
	text-align: center;
	position: relative;
	bottom: 15px;
	z-index: 99;
}
.block-ctrls ul{
	list-style: none;
	display: inline-block;
	background: transparent;
	width: auto;
}
.block-ctrls ul li{
	float: left;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 2px;
	margin-left: 2px;
}
.block-ctrls ul li.current{
	#background: transparent;
}

scrollPanel.html

<section id="blockButton" style="text-align: center;" class="blockArea">
			<div style="display: block;overflow: hidden;">
				<div class="outSide" style="-webkit-transform: translate3d(0px, 0px, 0px);">
					<ul class="blockButton">
						<li id="1">
							<div>
								<span class="buttons mrjg"></span>
								<h4>每日金股</h4>
							</div>
						</li>
						<li id="2">
							<div>
								<span class="buttons rdtc"></span>
								<h4>最新题材</h4>
							</div>
						</li>
						<li id="3">
							<div>
								<span class="buttons dxg"></span>
								<h4>新股中心</h4>
							</div>
						</li>
						<li id="4">
							<div>
								<span class="buttons jgtz"></span>
								<h4>机构策略</h4>
							</div>
						</li>
						<li id="5">
							<div>
								<span class="buttons lhb"></span>
								<h4>龙虎榜</h4>
							</div>
						</li>
						<li id="6">
							<div>
								<span class="buttons xg"></span>
								<h4>选股</h4>
							</div>
						</li>
						<li id="7">
							<div>
								<span class="buttons zjlx"></span>
								<h4>资金流向</h4>
							</div>
						</li>
						<li id="8">
							<div>
								<span class="buttons fjb"></span>
								<h4>分级B</h4>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="block-ctrls">
				<ul></ul>
			</div>
		</section>