Question

我正在尝试循环这个jsFiddle，但是当我得到最后一个div（在这种情况下是数字6）时，只显示div编号1并且循环中断。

当我尝试从div 1返回时也会出现同样的情况：到达数字1时会显示div编号6并且循环中断。有人会解决这个问题吗？

这是我的代码：

HTML：

<div id="right_curriculum_container">
<img src="img/1_c_left_arrow.png" id="left_arrow" width="26" height="26" alt="Previous" title="Previous">
<div id="new_container">
<div id="image_container">

<div class="center_image">1</div>
<div class="center_image">2</div>

<div class="center_image">3</div>
<div class="center_image">4</div>

<div class="center_image">5</div>
<div class="center_image">6</div>



</div>
</div>
<img src="img/1_c_right_arrow.png" id="right_arrow" width="26" height="26" alt="Next" title="Next"></div>

CSS：

.left_arroq {
    width: 40px;
    height: 40px;
    float: left;
    padding-top: 110px;
    padding-bottom: 100px;  
}
#right_arrow {
    text-align: center;
    display: block;
    margin-left: 13px;
    cursor: pointer;
    position:absolute;
    z-index:99;
    top:112px;
    left:388px;
}
#left_arrow {
    text-align: center;
    display: block;
    margin-left: 13px;
    cursor: pointer;
    position:absolute;
    z-index:99;
    top:112px;
}
/* Added New_Container */
#new_container {
width: 350px;
overflow:hidden;
position: relative;
margin-left:36px;
}
#image_container {
    height: 250px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    float: left;
    overflow:hidden;
    display: block;
    position: relative;
}
.center_image {
    height: 235px;
    width: 163px;
    background-color: #606060;
    float: left;
    margin-left: 8px;
    border: 2px solid #7ACBBF;
    margin-top: 6px;
    position: relative;
}

JS：

$(document).ready(function() {


   var $imgWidth = $('.center_image').first().outerWidth();
   var $imgCount = $('.center_image').length;
   $('#image_container').width($imgWidth*($imgCount+30));
   $('.center_image').first().addClass('the_first');
   $('.center_image').last().addClass('the_last');
   $('.the_first').clone().appendTo('#image_container');


   $('.the_last').clone().prependTo('#image_container');
   $('.center_image').css({'left':-1*$imgWidth-9+'px'}); 


   $('#left_arrow').click(function() {
$('.center_image').stop(true,true);  
      var $newLeft = $('.center_image').position().left+(2*($imgWidth)+16);
      $('.center_image').animate({'left':$newLeft+'px'},function(){
         if (Math.abs($newLeft) == (($imgCount+1)*$imgWidth)) 
            {
            $('.center_image').css({'left':-1*$imgWidth -9+'px'}); 
            }
         });
      return false;
   });

    $('#right_arrow').click(function() {
$('.center_image').stop(true,true); 
      var $newLeft = $('.center_image').position().left-(2*($imgWidth)+16);
      $('.center_image').animate({'left':$newLeft+'px'},function(){
         if (Math.abs($newLeft) == (0)) 
            {
            $('.center_image').css({'left':-($imgCount)*$imgWidth-9+'px'});
            }
    });
   return false;
     });

});

Answer 1

因为你创建的代码是为了在视口中只显示一个图像而设计的，所以一个简单的解决方案就是创建一个新的div来包装div center_image的块（2x2），只移动1个div而不是2。 / p>

循环2每2个Div的范围

1 个答案: