首页 > 代码库 > JS-DOM:基础实操---大图滚动

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

HTML部分

<div id="wrap">
    <div id="middle">
        <img src="http://www.mamicode.com/img/1.jpg" >
        <img src="http://www.mamicode.com/img/2.jpg" >
        <img src="http://www.mamicode.com/img/3.jpg" >
        <img src="http://www.mamicode.com/img/4.jpg" >
    </div>
</div>
<div id="con">
    <input type="button" value="http://www.mamicode.com/按钮1">
    <input type="button" value="http://www.mamicode.com/按钮2">
    <input type="button" value="http://www.mamicode.com/按钮3">
    <input type="button" value="http://www.mamicode.com/按钮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="http://www.mamicode.com/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>