一个jQuery无缝滚动的古怪需求，求解决方案？？？？？？谢谢

功能需求见里面说明，已经做了测试效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>films</title>
<style type="text/css">
html,body,div,dl,dd,ul,li,h2,p,strong{ margin: 0; padding: 0; border: 0; list-style: none; font-size: 1em; }
body{  font:14px/2 Verdana, Geneva, sans-serif; color: #888; background: #ffe; }
.films{ margin: 0 auto; width: 800px; height: 300px; border: 6px solid #aaa;  position: relative; overflow: hidden;  }
.films a{ display:block; text-align:center; text-decoration:none; color:#888; background:#222; font-size:40px; }
.films dl{ zoom:1; }
.films dl:after{ clear: both; content: ""; display: block; height: 0; overflow: hidden; }
.photos{ position: absolute; left: 0; top:0; width: 600px; }
.photos li{ vertical-align: top; }
.photos a{ width:600px; height:300px; line-height:300px; background:#eee; color:#aaa; font-size:120px; } 
.nav{ position: absolute; right: 0; top:0; width: 200px; background: #2D1E17; }
.nav li{ vertical-align: top; }
.nav li a{ width:200px; height:99px; line-height:99px;  border-bottom:1px solid #333; }
.nav li.on a{ color: #fff; background:#444; border-bottom-color:#555;  }
/*=================*/
.tec{ margin:0 auto; padding:20px 0; width:800px; color:#666; }
.tec h2{ color:#000; }
.tec strong{ color:#f00; font-weight:400; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<div class="tec">
<h2>功能需求</h2>
<p>
  1：左边的大图片不停的向上滚动，图片数量没有上限；右边每次向上滚动3个图片；<br>
  2：左边的大图片和右边的小图片一一对应，当点击右边的小图片时左边直接切换对应的大图片；<br>
  3：出现的问题：<strong>当右边的小图片数量不是3的倍数时，会出现右边缺少1-2个小图片的问题；</strong><br>
  4：想实现的效果：<strong>在保证1-2功能的同时，右边的图片无缝滚动。</strong><br>
</p>
</div>
<div class="films">
<dl>
  <dd class="photos">
      <ul>
          <li><a href="#">01</a></li>
          <li><a href="#">02</a></li>
          <li><a href="#">03</a></li>
          <li><a href="#">04</a></li>
      </ul>
  </dd>
  <dd class="nav">
      <ul>
          <li><a href="#">01</a></li>
          <li><a href="#">02</a></li>
          <li><a href="#">03</a></li>
          <li><a href="#">04</a></li>
      </ul>
  </dd>
</dl>
</div>
<script type="text/javascript">
$(document).ready(function(){  var len=$(".photos li").length;
  var pHeight=$(".films").height();
  var nHeight=$(".films .nav li").height();
  var index=0;
  var adTimer;
  $(".nav li:first").addClass("on");  $(".nav li").mouseover(function(){
      index=$(".nav li").index(this);
      scroll(index);
  }).eq(0).mouseover();
  
  $(".films").hover(function(){
      clearInterval(adTimer);
  },function(){
      adTimer=setInterval(function(){
          scroll(index);
          index++;
          if(index==len){ index=0; }
      },2000);
  }).trigger("mouseleave");  function scroll(index){
      $(".photos").animate({top:-index*pHeight},500);
      if(!(index%3)){
          $(".nav").animate({top:-index*nHeight},500);
      }
      $(".nav li").removeClass("on").eq(index).addClass("on");
  }
  
});
</script>
</body>
</html>

解决方案 »

  1.   

    是想要这样子吗？？
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>films</title>
    <style type="text/css">
    html,body,div,dl,dd,ul,li,h2,p,strong{ margin: 0; padding: 0; border: 0; list-style: none; font-size: 1em; }
    body{  font:14px/2 Verdana, Geneva, sans-serif; color: #888; background: #ffe; }
    .films{ margin: 0 auto; width: 800px; height: 300px; border: 6px solid #aaa;  position: relative; overflow: hidden;  }
    .films a{ display:block; text-align:center; text-decoration:none; color:#888; background:#222; font-size:40px; }
    .films dl{ zoom:1; }
    .films dl:after{ clear: both; content: ""; display: block; height: 0; overflow: hidden; }
    .photos{ position: absolute; left: 0; top:0; width: 600px; }
    .photos li{ vertical-align: top; }
    .photos a{ width:600px; height:300px; line-height:300px; background:#eee; color:#aaa; font-size:120px; } 
    .nav{ position: absolute; right: 0; top:0; width: 200px; background: #2D1E17; }
    .nav li{ vertical-align: top; }
    .nav li a{ width:200px; height:99px; line-height:99px;  border-bottom:1px solid #333; }
    .nav li.on a{ color: #fff; background:#444; border-bottom-color:#555;  }
    /*=================*/
    .tec{ margin:0 auto; padding:20px 0; width:800px; color:#666; }
    .tec h2{ color:#000; }
    .tec strong{ color:#f00; font-weight:400; }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    </head>
    <body>
    <div class="tec">
    <h2>功能需求</h2>
    <p>
      1：左边的大图片不停的向上滚动，图片数量没有上限；右边每次向上滚动3个图片；<br>
      2：左边的大图片和右边的小图片一一对应，当点击右边的小图片时左边直接切换对应的大图片；<br>
      3：出现的问题：<strong>当右边的小图片数量不是3的倍数时，会出现右边缺少1-2个小图片的问题；</strong><br>
      4：想实现的效果：<strong>在保证1-2功能的同时，右边的图片无缝滚动。</strong><br>
    </p>
    </div>
    <div class="films">
    <dl>
      <dd class="photos">
          <ul>
              <li><a href="#">01</a></li>
              <li><a href="#">02</a></li>
              <li><a href="#">03</a></li>
              <li><a href="#">04</a></li>
          </ul>
      </dd>
      <dd class="nav">
          <ul>
              <li><a href="#">01</a></li>
              <li><a href="#">02</a></li>
              <li><a href="#">03</a></li>
              <li><a href="#">04</a></li>
          </ul>
      </dd>
    </dl>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){  var len=$(".photos li").length;
      var pHeight=$(".films").height();
      var nHeight=$(".films .nav li").height();
      var index=0;
      var adTimer;
      $(".nav li:first").addClass("on");  $(".nav li").mouseover(function(){
          index=$(".nav li").index(this);
          scroll(index);
      }).eq(0).mouseover();
      
      $(".films").hover(function(){
          clearInterval(adTimer);
      },function(){
          adTimer=setInterval(function(){
              scroll(index);
              index++;
              if(index==len){ index=0; }
          },2000);
      }).trigger("mouseleave");  function scroll(index){
          $(".photos").animate({top:-index*pHeight},500);
          if(!(index%3)){
              $(".nav").animate({top:- parseInt(index/3)*nHeight},500);
          }
          $(".nav li").removeClass("on").eq(index).addClass("on");
      }
      
    });
    </script>
    </body>
    </html>
    只需要将最后scroll函数中的一句$(".nav").animate({top:-index*nHeight},500);
    改成$(".nav").animate({top:- parseInt(index/3)*nHeight},500);就可以了
      

  2.   


    你把代码改成这样试试，我试过可以。不知道对你有没帮助
        $(document).ready(function () {
            var len = $(".photos li").length;
            var pHeight = $(".films").height();
            var nHeight = $(".films .nav li").height();
            var index = 0;
            var adTimer;
            var count = 3;      //每屏显示多少个
            $(".nav li:first").addClass("on");        $(".nav li").mouseover(function () {
                index = $(".nav li").index(this);
                scroll(index);
            }).eq(0).mouseover();        $(".films").hover(function () {
                clearInterval(adTimer);
            }, function () {
                adTimer = setInterval(function () {
                    scroll(index);
                    index++;
                    if (index == len) { index = 0; }
                }, 2000);
            }).trigger("mouseleave");        function scroll(index) {
                $(".photos").animate({ top: -index * pHeight }, 500);
                //当index大于2屏时有位移，小于2时复位(index从0开始)
                $(".nav").animate({ top: -((index - count + 1 >= 0 ? (index - count + 1) : 0)) * nHeight }, 500);
                $(".nav li").removeClass("on").eq(index).addClass("on");
            }
        });
      

  3.   

    什么意思？不太明白，现在index第四张的时候不是跟着滚动吗？
      

  4.   

        其实思路大概就是那样，大于第三张的时候才开始移动。就是说当index<=2(0,1,2)时top = 0,当index>2时开始移动3-index + 1 格，具体要怎样处理你可以自己实现。那个3就是你只显示的3个图片，我已经用count代替了。
        希望能帮到你。
      

  5.   

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>films</title>
    <style type="text/css">
    html,body,div,dl,dd,ul,li,h2,p,strong{ margin: 0; padding: 0; border: 0; list-style: none; font-size: 1em; }
    body{  font:14px/2 Verdana, Geneva, sans-serif; color: #888; background: #ffe; }
    .films{ margin: 0 auto; width: 800px; height: 300px; border: 6px solid #aaa;  position: relative; overflow: hidden;  }
    .films a{ display:block; text-align:center; text-decoration:none; color:#888; background:#222; font-size:40px; }
    .films dl{ zoom:1; }
    .films dl:after{ clear: both; content: ""; display: block; height: 0; overflow: hidden; }
    .photos{ position: absolute; left: 0; top:0; width: 600px; }
    .photos li{ vertical-align: top; }
    .photos a{ width:600px; height:300px; line-height:300px; background:#eee; color:#aaa; font-size:120px; } 
    .nav{ position: absolute; right: 0; top:0; width: 200px; background: #2D1E17; }
    .nav li{ vertical-align: top; }
    .nav li a{ width:200px; height:99px; line-height:99px;  border-bottom:1px solid #333; }
    .nav li.on a{ color: #fff; background:#444; border-bottom-color:#555;  }
    /*=================*/
    .tec{ margin:0 auto; padding:20px 0; width:800px; color:#666; }
    .tec h2{ color:#000; }
    .tec strong{ color:#f00; font-weight:400; }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    </head>
    <body>
    <div class="tec">
    <h2>功能需求</h2>
    <p>
      1：左边的大图片不停的向上滚动，图片数量没有上限；右边每次向上滚动3个图片；<br>
      2：左边的大图片和右边的小图片一一对应，当点击右边的小图片时左边直接切换对应的大图片；<br>
      3：出现的问题：<strong>当右边的小图片数量不是3的倍数时，会出现右边缺少1-2个小图片的问题；</strong><br>
      4：想实现的效果：<strong>在保证1-2功能的同时，右边的图片无缝滚动。</strong><br>
    </p>
    </div>
    <div class="films">
    <dl>
      <dd class="photos">
          <ul>
              <li><a href="#">01</a></li>
              <li><a href="#">02</a></li>
              <li><a href="#">03</a></li>
              <li><a href="#">04</a></li>
          </ul>
      </dd>
      <dd class="nav">
          <ul>
              <li><a href="#">01</a></li>
              <li><a href="#">02</a></li>
              <li><a href="#">03</a></li>
              <li><a href="#">04</a></li>
          </ul>
      </dd>
    </dl>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){  var len=$(".photos li").length;
      var pHeight=$(".films").height();
      var nHeight=$(".films .nav li").height();
      var index=0;
      var adTimer;
      $(".nav li:first").addClass("on");  $(".nav li").mouseover(function(){
          index=$(".nav li").index(this);
          scroll(index);
      }).eq(0).mouseover();
      
      $(".films").hover(function(){
          clearInterval(adTimer);
      },function(){
          adTimer=setInterval(function(){
              scroll(index);
              index++;
              if(index==len){ index=0; }
          },1000);
      }).trigger("mouseleave");  function scroll(index){
          $(".photos").animate({top:-index*pHeight},500);
          if(index%3==0){
              if(len-index<3){
      var new_li1=$('<li><a href="#">01</a></li>');
      var new_li2=$('<li><a href="#">02</a></li>');
      var new_p1=$('<li><a href="#">01</a></li>');
      var new_p2=$('<li><a href="#">02</a></li>');
      $(".photos ul").append(new_p1).append(new_p2);
             $(".nav ul").append(new_li1).append(new_li2);
             $(".nav").animate({top:-parseInt(index)*nHeight},500);
             len=len+2; 
              }else{
                $(".nav").animate({top:-parseInt(index)*nHeight},500);
              }  
               
                
          }
          
          
         
          $(".nav li").removeClass("on").eq(index).addClass("on");
      }
      
    });
    </script>
    </body>
    </html>楼主想要这种效果的
      

  6.   


    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>films</title>
    <style type="text/css">
    html,body,div,dl,dd,ul,li,h2,p,strong{ margin: 0; padding: 0; border: 0; list-style: none; font-size: 1em; }
    body{  font:14px/2 Verdana, Geneva, sans-serif; color: #888; background: #ffe; }
    .films{ margin: 0 auto; width: 800px; height: 300px; border: 6px solid #aaa;  position: relative; overflow: hidden;  }
    .films a{ display:block; text-align:center; text-decoration:none; color:#888; background:#222; font-size:40px; }
    .films dl{ zoom:1; }
    .films dl:after{ clear: both; content: ""; display: block; height: 0; overflow: hidden; }
    .photos{ position: absolute; left: 0; top:0; width: 600px; }
    .photos li{ vertical-align: top; }
    .photos a{ width:600px; height:300px; line-height:300px; background:#eee; color:#aaa; font-size:120px; } 
    .nav{ position: absolute; right: 0; top:0; width: 200px; background: #2D1E17; }
    .nav li{ vertical-align: top; }
    .nav li a{ width:200px; height:99px; line-height:99px;  border-bottom:1px solid #333; }
    .nav li.on a{ color: #fff; background:#444; border-bottom-color:#555;  }
    /*=================*/
    .tec{ margin:0 auto; padding:20px 0; width:800px; color:#666; }
    .tec h2{ color:#000; }
    .tec strong{ color:#f00; font-weight:400; }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
    <div class="tec">
    <h2>功能需求</h2>
    <p>
      1：左边的大图片不停的向上滚动，图片数量没有上限；右边每次向上滚动3个图片；<br>
      2：左边的大图片和右边的小图片一一对应，当点击右边的小图片时左边直接切换对应的大图片；<br>
      3：出现的问题：<strong>当右边的小图片数量不是3的倍数时，会出现右边缺少1-2个小图片的问题；</strong><br>
      4：想实现的效果：<strong>在保证1-2功能的同时，右边的图片无缝滚动。</strong><br>
    </p>
    </div>
    <div class="films">
    <dl>
      <dd class="photos">
          <ul>
              <li class="file-1"><a href="#">01</a></li>
              <li class="file-2"><a href="#">02</a></li>
              <li class="file-3"><a href="#">03</a></li>
              <li class="file-4"><a href="#">04</a></li>
          </ul>
      </dd>
      <dd class="nav">
          <ul>
              <li class="file-1"><a href="#">01</a></li>
              <li class="file-2"><a href="#">02</a></li>
              <li class="file-3"><a href="#">03</a></li>
              <li class="file-4"><a href="#">04</a></li>
          </ul>
      </dd>
    </dl>
    </div>
    <script type="text/javascript">
    $(function(){
    var films = $('.films').eq(0),
    navList = $('.nav', films),
    photoList = $('.photos', films),
    nHeight = navList.children().children().first().height(),
    pHeight = photoList.children().children().first().height();
    navList.find('li').first().addClass('on');
    navList.find('ul').prepend('<li class="helper"><a href="#">helper</a></li>').end().css('top', '-' + nHeight + 'px');
    photoList.find('ul').prepend('<li class="helper"><a href="#">helper</a></li>').end().css('top', '-' + pHeight + 'px');

    var adTimer = setInterval(myScroll, 2000);
    $(".films").hover(function(){
    clearInterval(adTimer);
    },function(){
    adTimer = setInterval(myScroll, 2000);
    });
    $("li", navList).mouseenter(function(){
    myScrollTo($('li.' +  $(this).attr('class'), photoList));
    $(this).addClass('on');
    $(this).siblings().removeClass('on');

    });

    function myScroll(){
    var activeElem = $('li.on', navList);
    if(activeElem.index() >= 2){
    $(".helper", navList).animate({"height": "0px"},500, function(){
      $(this).height(nHeight);
      $(this).next().appendTo($(this).parent());
    });
    }
    activeElem.next().addClass('on').siblings().removeClass('on');
    $(".helper", photoList).animate({"height": "0px"},500, function(){
      $(this).height(pHeight);
      $(this).next().appendTo($(this).parent());
    });
    }
    function myScrollTo(elem){
    elem.prevUntil('.helper').appendTo(elem.parent());
    }
    });

    </script>
    </body>
    </html>
      

  7.   

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>films</title>
    <style type="text/css">
    html,body,div,dl,dd,ul,li,h2,p,strong{ margin: 0; padding: 0; border: 0; list-style: none; font-size: 1em; }
    body{  font:14px/2 Verdana, Geneva, sans-serif; color: #888; background: #ffe; }
    .films{ margin: 0 auto; width: 800px; height: 300px; border: 6px solid #aaa;  position: relative; overflow: hidden;  }
    .films a{ display:block; text-align:center; text-decoration:none; color:#888; background:#222; font-size:40px; }
    .films dl{ zoom:1; }
    .films dl:after{ clear: both; content: ""; display: block; height: 0; overflow: hidden; }
    .photos{ position: absolute; left: 0; top:0; width: 600px; }
    .photos li{ vertical-align: top; }
    .photos a{ width:600px; height:300px; line-height:300px; background:#eee; color:#aaa; font-size:120px; } 
    .nav{ position: absolute; right: 0; top:0; width: 200px; background: #2D1E17; }
    .nav li{ vertical-align: top; }
    .nav li a{ width:200px; height:99px; line-height:99px;  border-bottom:1px solid #333; }
    .nav li.on a{ color: #fff; background:#444; border-bottom-color:#555;  }
    /*=================*/
    .tec{ margin:0 auto; padding:20px 0; width:800px; color:#666; }
    .tec h2{ color:#000; }
    .tec strong{ color:#f00; font-weight:400; }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    </head>
    <body>
    <div class="tec">
    <h2>功能需求</h2>
    <p>
      1：左边的大图片不停的向上滚动，图片数量没有上限；右边每次向上滚动3个图片；<br>
      2：左边的大图片和右边的小图片一一对应，当点击右边的小图片时左边直接切换对应的大图片；<br>
      3：出现的问题：<strong>当右边的小图片数量不是3的倍数时，会出现右边缺少1-2个小图片的问题；</strong><br>
      4：想实现的效果：<strong>在保证1-2功能的同时，右边的图片无缝滚动。</strong><br>
    </p>
    </div>
    <div class="films">
    <dl>
      <dd class="photos">
          <ul>
              <li><a href="#">01</a></li>
              <li><a href="#">02</a></li>
              <li><a href="#">03</a></li>
              <li><a href="#">04</a></li>
          </ul>
      </dd>
      <dd class="nav">
          <ul>
              <li><a href="#">01</a></li>
              <li><a href="#">02</a></li>
              <li><a href="#">03</a></li>
              <li><a href="#">04</a></li>
          </ul>
      </dd>
    </dl>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){  var len=$(".photos li").length;
      var pHeight=$(".films").height();
      var nHeight=$(".films .nav li").height();
      var index=0;
      var adTimer;
      $(".nav li:first").addClass("on");  $(".nav li").mouseover(function(){
          index=$(".nav li").index(this);
          scroll(index);
      }).eq(0).mouseover();
      
      $(".films").hover(function(){
          clearInterval(adTimer);
      },function(){
          adTimer=setInterval(function(){
              scroll(index);
              index++;
              if(index==len){ index=0; }
          },1000);
      }).trigger("mouseleave");  function scroll(index){
          $(".photos").animate({top:-index*pHeight},500);
          if(index%3==0){
              if(len-index<=3){
      $(".photos ul").append($($(".photos ul").html()));
             $(".nav ul").append($($(".nav ul").html()));
             $(".nav").animate({top:-parseInt(index)*nHeight},500);
             len=len+4; 
              }else{
                $(".nav").animate({top:-parseInt(index)*nHeight},500);
              }  
               
                
          }
          
          
         
          $(".nav li").removeClass("on").eq(index).addClass("on");
      }
      
    });
    </script>
    </body>
    </html>刚才写错了 这个才是正确的 希望符合你的需求
      

  8.   

        我明白你意思了，你是想三张三张的移动是吧。不好意思，没看清楚。
        有一点不清楚的地方是，你说第7张下面有1,2两张图片。那么下一跳的时候它是显示3,4,5呢？还是继续显示1,2,3呢，如果是显示3,4,5的话可能会比较麻烦。可能需要修改dom来实现，如果只是后面继续显示1,2,3的话，最最简单的方法是在7的后面补全1,2。直到为3的倍数。
        这个方法肯定不是最好的，如果觉得这样不好的话，那还是另想办法。不过可能需要重新写scroll函数，因为不能简单的修改top的值来改变样式，还要修改dom。
      

  9.   

    你要三张三张的移动，我也给你嘛。不过在图片少于6张时，有点丑。<!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>films</title>
    <style type="text/css">
    html,body,div,dl,dd,ul,li,h2,p,strong{ margin: 0; padding: 0; border: 0; list-style: none; font-size: 1em; }
    body{  font:14px/2 Verdana, Geneva, sans-serif; color: #888; background: #ffe; }
    .films{ margin: 0 auto; width: 800px; height: 300px; border: 6px solid #aaa;  position: relative; overflow: hidden;  }
    .films a{ display:block; text-align:center; text-decoration:none; color:#888; background:#222; font-size:40px; }
    .films dl{ zoom:1; }
    .films dl:after{ clear: both; content: ""; display: block; height: 0; overflow: hidden; }
    .photos{ position: absolute; left: 0; top:0; width: 600px; }
    .photos li{ vertical-align: top; }
    .photos a{ width:600px; height:300px; line-height:300px; background:#eee; color:#aaa; font-size:120px; } 
    .nav{ position: absolute; right: 0; top:0; width: 200px; background: #2D1E17; }
    .nav li{ vertical-align: top; }
    .nav li a{ width:200px; height:99px; line-height:99px;  border-bottom:1px solid #333; }
    .nav li.on a{ color: #fff; background:#444; border-bottom-color:#555;  }
    /*=================*/
    .tec{ margin:0 auto; padding:20px 0; width:800px; color:#666; }
    .tec h2{ color:#000; }
    .tec strong{ color:#f00; font-weight:400; }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
    <div class="tec">
    <h2>功能需求</h2>
    <p>
      1：左边的大图片不停的向上滚动，图片数量没有上限；右边每次向上滚动3个图片；<br>
      2：左边的大图片和右边的小图片一一对应，当点击右边的小图片时左边直接切换对应的大图片；<br>
      3：出现的问题：<strong>当右边的小图片数量不是3的倍数时，会出现右边缺少1-2个小图片的问题；</strong><br>
      4：想实现的效果：<strong>在保证1-2功能的同时，右边的图片无缝滚动。</strong><br>
    </p>
    </div>
    <div class="films">
    <dl>
      <dd class="photos">
          <ul>
              <li class="file-1"><a href="#">01</a></li>
              <li class="file-2"><a href="#">02</a></li>
              <li class="file-3"><a href="#">03</a></li>
              <li class="file-4"><a href="#">04</a></li>
          </ul>
      </dd>
      <dd class="nav">
          <ul>
              <li class="file-1"><a href="#">01</a></li>
              <li class="file-2"><a href="#">02</a></li>
              <li class="file-3"><a href="#">03</a></li>
              <li class="file-4"><a href="#">04</a></li>
          </ul>
      </dd>
    </dl>
    </div>
    <script type="text/javascript">
    $(function(){
    var films = $('.films').eq(0),
    navList = $('.nav', films),
    photoList = $('.photos', films),
    height = films.height();
    navList.find('li').first().addClass('on');
    var helper = $('<div class="helper"></div>').height(height);
    navList.css('top', '-' + height + 'px').prepend(helper.clone());
    photoList.css('top', '-' + height + 'px').prepend(helper.clone());

    var adTimer = setInterval(myScroll, 2000);
    $(".films").hover(function(){
    clearInterval(adTimer);
    },function(){
    adTimer = setInterval(myScroll, 2000);
    });
    $("li", navList).mouseenter(function(){
    myScrollTo($('li.' +  $(this).attr('class'), photoList));
    $(this).addClass('on');
    $(this).siblings().removeClass('on');

    });

    function myScroll(){
    var lis = $('li', navList),
    activeElem = lis.filter('.on');
    if(activeElem.index() >= 2){
    $(".helper", navList).animate({"height": "0px"},500, function(){
      $(this).height(height);
      activeElem.next().addClass('on').siblings().removeClass('on');
      lis.slice(0, activeElem.index() + 1).appendTo($(this).next());
    });
    }else{
    activeElem.next().addClass('on').siblings().removeClass('on');
    }
    $(".helper", photoList).animate({"height": "0px"},500, function(){
      $(this).height(height);
      var ul = photoList.find('ul');
      ul.children().first().appendTo(ul);
    });
    }
    function myScrollTo(elem){
    var lis = $('li', photoList);
    lis.slice(0, elem.index()).appendTo(elem.parent());
    }
    });

    </script>
    </body>
    </html>
      

  10.   


    测试这个脚本不能实现正常的效果，并且造成了Firefox浏览器挂掉。
      

  11.   

    搞不定啦 我擦 只是改进了下 
    右边要一直向上滚 那top的值必须越来越大 如果把前边的删了 那top的值下次增大的时候就到不了想要的地方了 
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>
    films
    </title>
    <style type="text/css">
    html,body,div,dl,dd,ul,li,h2,p,strong{ margin: 0; padding: 0; border:
    0; list-style: none; font-size: 1em; } body{ font:14px/2 Verdana, Geneva,
    sans-serif; color: #888; background: #ffe; } .films{ margin: 0 auto; width:
    800px; height: 300px; border: 6px solid #aaa; position: relative; overflow:
    hidden; } .films a{ display:block; text-align:center; text-decoration:none;
    color:#888; background:#222; font-size:40px; } .films dl{ zoom:1; } .films
    dl:after{ clear: both; content: ""; display: block; height: 0; overflow:
    hidden; } .photos{ position: absolute; left: 0; top:0; width: 600px; }
    .photos li{ vertical-align: top; } .photos a{ width:600px; height:300px;
    line-height:300px; background:#eee; color:#aaa; font-size:120px; } .nav{
    position: absolute; right: 0; top:0; width: 200px; background: #2D1E17;
    } .nav li{ vertical-align: top; } .nav li a{ width:200px; height:99px;
    line-height:99px; border-bottom:1px solid #333; } .nav li.on a{ color:
    #fff; background:#444; border-bottom-color:#555; } /*=================*/
    .tec{ margin:0 auto; padding:20px 0; width:800px; color:#666; } .tec h2{
    color:#000; } .tec strong{ color:#f00; font-weight:400; }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
    </head>
    <body>
    <div class="tec">
    <h2>
    功能需求
    </h2>
    <p>
    1：左边的大图片不停的向上滚动，图片数量没有上限；右边每次向上滚动3个图片；
    <br>
    2：左边的大图片和右边的小图片一一对应，当点击右边的小图片时左边直接切换对应的大图片；
    <br>
    3：出现的问题：
    <strong>
    当右边的小图片数量不是3的倍数时，会出现右边缺少1-2个小图片的问题；
    </strong>
    <br>
    4：想实现的效果：
    <strong>
    在保证1-2功能的同时，右边的图片无缝滚动。
    </strong>
    <br>
    </p>
    </div>
    <div class="films">
    <dl>
    <dd class="photos">
    <ul>
    <li>
    <a href="#">
    01
    </a>
    </li>
    <li>
    <a href="#">
    02
    </a>
    </li>
    <li>
    <a href="#">
    03
    </a>
    </li>
    <li>
    <a href="#">
    04
    </a>
    </li>
    </ul>
    </dd>
    <dd class="nav">
    <ul>
    <li>
    <a href="#">
    01
    </a>
    </li>
    <li>
    <a href="#">
    02
    </a>
    </li>
    <li>
    <a href="#">
    03
    </a>
    </li>
    <li>
    <a href="#">
    04
    </a>
    </li>
    </ul>
    </dd>
    </dl>
    </div>
    <script type="text/javascript">
    $(document).ready(function() { var len = $(".photos li").length;
    var pHeight = $(".films").height();
    var nHeight = $(".films .nav li").height();
    var index = 0;
    var adTimer;

    var navChild=$(".nav ul").html();
    var photosChild=$(".photos ul").html();

    $(".nav li:first").addClass("on"); $(".nav li").mouseover(function() {
    index = $(".nav li").index(this);
    scroll(index);
    }).eq(0).mouseover(); $(".films").hover(function() {
    clearInterval(adTimer);
    },
    function() {
    adTimer = setInterval(function() {
    scroll(index);
    index++;
    if (index == len) {
    index = 0;
    }
    },
    1000);
    }).trigger("mouseleave");
    function scroll(index) {
    $(".photos").animate({
    top: -index * pHeight
    },
    500);

    if (index % 3 == 0 ) {
    if (len - index <= 3) {
    $(".nav ul").append($(navChild));
    $(".photos ul").append($(photosChild));

    $(".nav").animate({
    top: -parseInt(index) * nHeight
    },
    500);
    len = $(".photos li").length;

    } else {

    $(".nav").animate({
    top: -parseInt(index) * nHeight
    },
    500);
    }

    }
    $(".nav li").removeClass("on").eq(index).addClass("on");


    }
    });
    </script>
    </body></html>
      

  12.   


    没看各个具体代码，但要说不合逻辑也未必见得。从上面有些叙述里面能够看出很多人是把这些图片作为相同等级的事物看待，所以就出现当左边大图对应的右边小图小于3个时出现次序混乱的问题。其实只要给右面的小图们，每一组加一个DIV包起来分成小组（后台取数据时按与左面大图对应的数据进行分组）。然后只要操作每个DIV就可以了，不必管DIV里面是3个还是2个或1个小图。而且在DIV的点击事件里也可以对应左面的大图，这样，不管点哪个小图，都对应一样的左面大图。详细的没看，只凭目前大致了解随便说一下，希望有帮助。
      

  13.   


    theforever，很感谢你的回复，这个已经不是最初的需求，功能大概是这样的。功能需求：
    1：左边的大图片不停的向上滚动，图片数量没有上限；右边每次向上滚动3个图片；
    2：左边的大图片和右边的小图片一一对应，当点击右边的小图片时左边直接切换对应的大图片；
    3：出现的问题：当右边的小图片数量不是3的倍数时，会出现右边缺少1-2个小图片的问题；
    4：想实现的效果：在保证1-2功能的同时，右边的图片无缝滚动。