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>