JS-DOM：基础实操---大图滚动

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：基础实操---大图滚动,古老的榕树,5-wow.com