手动点击翻滚图片

今天我们领导给我一个这样任务，要用手动点击翻滚图片，就和百度图片库里面那种差不多一样，有一个小箭头点击跳入下一张图片，我从来没做过这种，请问哪位大哥会做给个方案，或实例。在这里先感谢一下。。

解决方案 »

  1.   

    修改一下就可以了
    <!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>
    <style type="text/css">
    * {margin:0; padding:0; vertical-align:top;}
    img{border:0 none}
    .photo{ width:736px; height:213px; overflow:hidden; position:relative}
    .photo .step{ position:absolute; bottom:10px;right:15px; height:23px; z-index:2; color:#fff; font-size:14px; font-weight:bold;vertical-align:middle; cursor:pointer}
    .photo .step em{ margin:0 5px}
    .photo ul{ float:left; position:absolute;top:0;left:0;width:2208px}
    .photo li{ float:left;background:#09e; }
    .photo li img{ display:block;width:736px;height: 213px; }
    </style>
    </head>
    <body>
    <!--column-->
    <div class="column">
    <div class="photo" id="photo">
    <ul class="clear" id="photo-sub" style="width:2944px">
    <li><a href="#nogo" title="四季如春" target="_blank"><img src="/jscss/demoimg/wall1.jpg" alt="" /></a></li>
    <li><a href="#nogo" title="世界风光" target="_blank"><img src="/jscss/demoimg/wall2.jpg" alt="" /></a></li>
    <li><a href="#nogo" title="黄河之谜" target="_blank"><img src="/jscss/demoimg/wall3.jpg" alt="" /></a></li>
      <li><a href="#nogo" title="仅供测试" target="_blank"><img src="/jscss/demoimg/wall4.jpg" alt="" /></a></li>
    </ul>
    <div class="step" id="step-num"><span>上一页</span><em>1</em>/<em>3</em><span>下一页</span></div>
    </div>
    </div>
    <!--column end-->
    <script type="text/javascript">
    function photoAlbumn(photoObj,btnObj,numObj){
    var moveNum = 1,
     _void=true,
     cloneObj,nums,
     voidClone=false,
     d=document,
     elem = d.getElementById(photoObj),
     btnObj=d.getElementById(btnObj),
     numObj=d.getElementById(numObj);
    if (!elem) return false;
    if (!btnObj) return false;
    var elemObj = elem.getElementsByTagName("li"),
     autoWidth = elemObj[0].offsetWidth,
     btns = btnObj.getElementsByTagName("span"),
     max=elemObj.length;
     elem.style.width = (max+1)*autoWidth + "px";
    var numElement =function(){
    if(numObj){
     nums = numObj.getElementsByTagName("em");
     nums[1].innerHTML = max;
     nums[0].innerHTML = moveNum;
     }
    }
    var moveElement =function(final_x,final_y,interval){
     _void = false;
     var step = function () {
      if (elem.movement) clearTimeout(elem.movement);
      if (!elem.style.left) elem.style.left = "0px";
      if (!elem.style.top) elem.style.top = "0px";
      var xpos = parseInt(elem.style.left);
      var ypos = parseInt(elem.style.top);
      //alert(xpos)
      if (xpos == final_x && ypos == final_y) {
       _void = true;
    if(voidClone){
      elem.style.left = (moveNum > 2)?(-(max-1)*autoWidth +"px"):"0px";
      elem.removeChild(cloneObj);
      voidClone = false;
     }
       return true;
      }
      if (xpos < final_x) {
        var dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
      }
      if (xpos > final_x) {
        var dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
      }
      if (ypos < final_y) {
        var dist = Math.ceil((final_y - ypos)/10);
        ypos = ypos + dist;
      }
      if (ypos > final_y) {
        var dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
      }
      elem.style.left = xpos + "px";
      elem.style.top = ypos + "px";
      elem.movement = setTimeout(function(){step()},interval);
    }
     elem.movement = setTimeout(function(){step()},interval);
    } ;
    var moveAutoShow = function (){
    moveNum++;
     if(moveNum > max){
      cloneObj = elemObj[0].cloneNode(true);
      elem.appendChild(cloneObj);
      voidClone = true;
     }
    moveElement(-autoWidth*(moveNum-1),0,5);
     if(moveNum > max) moveNum=1;
     numElement();
    };
    var prepareSlideshow = function (){
    var moveAuto = setInterval(function(){moveAutoShow()},5000);
    btns[0].onmousedown = function() {
      if(!_void) return false;
    clearInterval(moveAuto);
    moveNum--;
        if(moveNum < 1){
      cloneObj = elemObj[(max-1)].cloneNode(true);
      cloneObj.style.cssText=";position:absolute;left:-" + autoWidth +"px";
      elem.insertBefore(cloneObj,elemObj[0]);
      voidClone = true;
     }
    moveElement(-autoWidth*(moveNum-1),0,5);
    moveAuto = setInterval(function(){moveAutoShow()},5000);
       if(moveNum < 1) moveNum=max;
      numElement();
    }
    btns[1].onmousedown = function() {
      if(!_void) return false;
    clearInterval(moveAuto);
    moveNum++;
       if(moveNum > max){
      cloneObj = elemObj[0].cloneNode(true);
      elem.appendChild(cloneObj);
      voidClone = true;
     }
    moveElement(-autoWidth*(moveNum-1),0,5);
    moveAuto = setInterval(function(){moveAutoShow()},5000);
      if(moveNum > max) moveNum=1;
      numElement();
    }
    };
    numElement();
    prepareSlideshow();
    }
    photoAlbumn("photo-sub","photo","step-num");
    </script>
    </body>
    </html>
      

  2.   

    http://www.popub.net/script/MSClass.html
      

  3.   

    希望能给你些提示！
    http://student.csdn.net/space.php?uid=442626&do=blog&id=47110