做一个照片墙 要求依据所在行 分别进行滚动  应该应用JS什么原理

解决方案 »

  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=gb2312" />
    <title>无标题文档</title>
    <link rel="stylesheet" type="text/css" href="../css/image.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("h2").append('<em></em>')
    $(".v_content_list a").click(function(){
      var largePath = $(this).attr("href");   var largeAlt = $(this).attr("title");
      $("#largeImg").attr({ src: largePath, alt: largeAlt });
      $("h2 em").html("" + largeAlt + ""); return false;}); 
      
        var page = 1;
            var i = 4; //每版放4个图片
      $(".aa").click(function(){
       var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
     var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
     var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
     var v_width = $v_content.width();
     var len = $v_show.find("li").length;
     var page_count = Math.ceil(len / i) ;   //只要不是整数,就往大的方向取最小的整数
     if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
       if( page == 1 ){  //已经到第一个版面了,如果再向前,必须跳转到最后一个版面。
    $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
    page = page_count;
    }else{
    $v_show.animate({ left : '+='+v_width }, "slow");
    page--;
    }
    }
    $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
      }); 
       $(".bb").click(function(){
          var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
     var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
     var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
     var v_width = $v_content.width() ;
     var len = $v_show.find("li").length;
     var page_count = Math.ceil(len / i) ;   //只要不是整数,就往大的方向取最小的整数
     if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
      if( page == page_count ){  //已经到最后一个版面了,如果再向后,必须跳转到第一个版面。
    $v_show.animate({ left : '0px'}, "slow"); //通过改变left值,跳转到第一个版面
    page = 1;
    }else{
    $v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值,达到每次换一个版面
    page++;
     }
     }
     $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
      }); 
     })
    </script>
    </head><body>
    <div class="v_show">
    <div align="center">
    <h2></h2>
    <img id="largeImg" src="../image/lights1.jpg" width="500" height="333"/>
    </div>
    <div class="v_content">
    <div> 
    <a class="aa" href="#" title="向前"><img src="../image/zoomimage_prev.gif" /><a>
    <a class="bb"  href="#" style=" margin-left:510px" title="向后"><img src="../image/zoomimage_next.gif" /></a>
    </div>
    <div class="v_content_list">
    <ul>
    <li><a href="../image/lights1.jpg" title="图片"><img src="../image/th_lights1.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片1"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights3.jpg" title="图片2"><img src="../image/th_lights3.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights1.jpg" title="图片"><img src="../image/th_lights1.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片1"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights3.jpg" title="图片2"><img src="../image/th_lights3.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights1.jpg" title="图片"><img src="../image/th_lights1.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片1"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights3.jpg" title="图片2"><img src="../image/th_lights3.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights1.jpg" title="图片"><img src="../image/th_lights1.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片1"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights3.jpg" title="图片2"><img src="../image/th_lights3.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights1.jpg" title="图片"><img src="../image/th_lights1.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片1"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights3.jpg" title="图片2"><img src="../image/th_lights3.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights1.jpg" title="图片"><img src="../image/th_lights1.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片1"><img src="../image/th_lights2.jpg" /></a></li>
    <li><a href="../image/lights3.jpg" title="图片2"><img src="../image/th_lights3.jpg" /></a></li>
    <li><a href="../image/lights2.jpg" title="图片"><img src="../image/th_lights2.jpg" /></a></li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>
    记得加上jquery.js 就行了