求大神来给个用javascript不是jquery的图片滑动的思路

我想实现的效果是， 先是 img 1 、 2 、 3 、 4轮流向左滑动，4滑动完了之后，接着1滑动。而不是通过scrollLeft=0；
然后可以通过点击某个按钮实现相反的效果，即向右滑动。哪位大神给个思路啊JavaScript图片滑动

解决方案 »

  1.   

    设个div  设置宽度和长度 overFlow='hidden'
    吧图片放到这个div里  用setTimeout改变图片的位置试试
      

  2.   

    通过控制左边的坐标位置。来实现。也就是left吧。
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function scrollImage(images,parentElement,imgWidth,imgHeight,divWidth,divHeight){
    var div=document.createElement("div");
    var divStyle={
    'height':divHeight+"px",
    'width':divWidth+"px",
    'position':'relative',
    'overflow':'hidden'
    };
    for(var i in divStyle){
    div.style[i]=divStyle[i];
    }
    var imgs=[];
    for(var i=0;i<images.length;i++){
    var img=new Image();
    img.src=images[i];
    var imgStyle={
    'position':'absolute',
    'top':'0px',
    'left':i*imgWidth+"px",
    'height':imgHeight+"px",
    'width':imgWidth+"px"
    }
    for(var m in imgStyle){
    img.style[m]=imgStyle[m];
    }
    div.appendChild(img);
    imgs.push(img);
    }
    parentElement.appendChild(div);
    change(imgs,imgWidth);
    }
    function change(imgs,imgWidth){
    for(var i=0;i<imgs.length;i++){
    var left=parseInt(imgs[i].style.left);
    imgs[i].style.left=left-1+"px";
    if(left-1<-imgWidth){
    imgs[i].style.left=imgWidth*(imgs.length-1)+"px";
    }
    }
    window.setTimeout(function(){change(imgs,imgWidth)},20);
    }
    window.onload=function(){
    scrollImage(['1.png','2.png','3.png','4.jpg','5.jpg'],document.body,200,200,400,200);
    }
    </script>
    </head><body>
    123
    </body>
    </html>
    类似这样试试