迴路2％的範圍

我想這個循環的jsFiddle 2個Div的，但是當我拿到最後一個div（在這種情況下，數字6）只顯示格數1和環斷裂。在1號到達顯示的DIV數字6和環斷裂：迴路2％的範圍

同樣的，當我試圖去從DIV 1回發生。有誰會解決這個問題嗎

這是我的代碼：

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; 
    }); 

});

來源

2013-12-16 V.Salles

看起來你的代碼是orginally建立滾動當時的一個畫面。因此，在第一張圖片的代碼開始處添加到結尾，反之亦然。在動畫的回調是應該的圖片的甲板上移動前進/後退，所以你不必創建DOM中的其他元素。在你的代碼中，它看起來已經改變了它在當時移動兩張圖片，但代碼移動完整的幻燈片卡片沒有更新。我有10分鐘的時間看着它，但無法真正弄清楚。也許如果你發佈原始代碼，它會更容易。 – Streamside

上述代碼改編自這個網站：[鏈接]（http://www.simonbattersby.com/blog/jquery-endless-slider/） –

因爲使用被創建的代碼來顯示在視口中只有一個圖像的簡單的解決方案是創建一個新的div wrapp DIV center_image的塊（2×2），使得僅1格來代替移動的2

來源

2013-12-16 23:09:40 Lorenzo

迴路2％的範圍

回答

相關問題