标签：style color java io strong for art ar
HTML部分
<div id="wrap">
<div id="middle">
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
</div>
</div>
<div id="con">
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<input type="button" value="按钮4">
</div>
CSS部分
<style type="text/css">
#middle img{
float: left;
width: 600px;
}
#wrap{
border: 1px solid yellow;
width: 600px;
overflow: hidden;
}
#middle{
width: 99999px;
overflow: hidden;
zoom: 1;
}
</style>
JS-DOM部分
<script type="text/javascript" src="tween.js"></script>
<script>
window.onload=function(){
var aBtn=document.getElementById("con").children;
var aImg=document.getElementById("middle").children;
var oWrap=document.getElementById("wrap");
var timer=null;
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
var start=oWrap.scrollLeft;
var end=aImg[0].offsetWidth*this.index;
var change=end-start;
var t=0;
var endT=20;
clearInterval(timer);
timer=setInterval(function(){
t++;
if(t==endT){
clearInterval(timer);
}
oWrap.scrollLeft=Tween.Cubic.easeOut(t,start,change,endT);
},30);
}
}
}
</script>
简单版：
<script>
window.onload=function(){
var aBtn=document.getElementById("con").children;
var aImg=document.getElementById("middle").children;
var oWrap=document.getElementById("wrap");
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
var end=aImg[0].offsetWidth*this.index;
oWrap.scrollLeft=end;
}
};
}
</script>
JS-DOM：基础实操---大图滚动,布布扣,bubuko.com
标签：style color java io strong for art ar
原文地址：http://www.cnblogs.com/lxbchengxunyuan/p/3895194.html
