}

topic.prototype={
creatHTML:function(){
objData= C.arg.data;
C.innerWarp.style.width = objData.length+'00%';
for(var i=0;i{
C.inhtml.push('');
}
C.innerWarp.innerHTML = C.inhtml.join('');
C.touchFN();
} ,
applyStyle:function(node, properties){
var p, s = node.style;
for (p in properties){
s[p] = properties[p];
}
},

animal:function(){
warpLeft = parseInt(C.current)*320;
C.applyStyle(C.innerWarp, {
"-webkit-transition-duration": '400ms',
"-webkit-transition-timing-function": 'ease-out-in'
});
C.innerWarp.style['-webkit-transform']='translate3d('+warpLeft+'px,0,0)';

},

scroll:function(dir){
if(dir=='r'&&Math.abs(C.current)>0){
C.current++;
}else if(dir=='l'&&Math.abs(C.current)
C.current--;
}else{
//alert('出错了吧。看看你点坏了是不？')
}
C.animal();
},

touchFN:function(){
var startPos,moverPos,divStartpos;
C.innerWarp.addEventListener('touchstart',function(e){
//触摸开始位置
startPos=parseInt(e.touches['0'].pageX)
var transform = C.innerWarp.style['-webkit-transform']?C.innerWarp.style['-webkit-transform']:'translate3d(0px,0,0)';
var translate3dLeft = transform.substring(transform.indexOf('(')+1,transform.indexOf(',')) ;
//将动画效果清除为无;
C.applyStyle(C.innerWarp, {
"-webkit-transition-duration": '',
"-webkit-transition-timing-function": ''
});
divStartpos =parseInt(translate3dLeft) ;
},false);

C.innerWarp.addEventListener('touchmove',function(e){
//触摸移动位置
moverPos = startPos - parseInt(e.touches['0'].pageX);
C.innerWarp.style['-webkit-transform']='translate3d('+(divStartpos - moverPos)+'px,0,0)';
e.preventDefault();
},false);
C.innerWarp.addEventListener('touchend',function(e){
if(Math.abs(moverPos)>50){
C.scroll(moverPos>0?'l':'r')
}else{
C.animal();
}
},false);

}
}

var app ={
id:document.querySelector('#scroll'),
tag:'div',
left:document.querySelector('#leftnav'),
right:document.querySelector('#rightnav'),
data:[
{
'url':'http://117.34.6.189/info/images/2012/4/133369506327612472.jpg',
'link':'#1',
'alt':'威邦网络科技企业官网建设'
},
{
'url':'http://117.34.6.189/info/images/2012/4/133368021561231988.jpg',
'link':'#2',
'alt':'威邦网络科技手机APP网络建设'
},

{
'url':'http://117.34.6.189/info/images/2012/4/133366915945072193.jpg',
'link':'#3',
'alt':'威邦网络科技虚拟主机'
}, {
'url':'http://117.34.6.189/info/images/2012/4/133369506327612472.jpg',
'link':'#1',
'alt':'威邦网络科技域名注册'
},
{
'url':'http://117.34.6.189/info/images/2012/4/133368021561231988.jpg',
'link':'#2',
'alt':'威邦网络科技企业邮局'
},
{
'url':'http://117.34.6.189/info/images/2012/4/133366915945072193.jpg',
'link':'#3',
'alt':'威邦网络科技SEO优化'
},

{
'url':'http://117.34.6.189/info/images/2012/4/133367099213623198.jpg',
'link':'#4',
'alt':'威邦网络科技淘宝网店装修'
}
]
}
new topic(app);

/\/*]]*\/

CSS部分

#scroll{background:#ddd;width:320px;overflow:hidden;height:170px;}
#scroll div{height:140px;width:400%;-webkit-transition-property: -webkit-transform;}
#scroll img,#scroll img{float:left;}

HTML 部分
<div id='scroll' >
    <div style='left:0px'>   
    </div>
     <a href="javascript:void('0')" id='rightnav'>《《《《《《《《《</a>  ||
     <a href="javascript:void('0')" id='leftnav'>》》》》》》》》》</a>
</div>