jQuery滑塊在結束時動態停止或追加li項目以繼續

我試圖讓jQuery函數通過單擊箭頭左右滑動li項目。我正在使用名爲TinyCarousel.js的jQuery腳本。雖然我的功能正常，但它仍會繼續向右滾動，直到最後一個li項目處於第一個位置。我目前在主遊標下的「遊戲當前測試或釋放部分」中可以看到here。如果您一直滾動到右側，您會注意到該問題。jQuery滑塊在結束時動態停止或追加li項目以繼續

是否有可能要麼...

1）改變了jQuery做最後的李項目停止，一旦它被顯示在窗口的右側一路？我知道這必須與瀏覽器窗口大小有關，並且在窗口大小顯示部分項目時進行單個部分移動。我也知道我必須知道我可以在php中完成的li項目的數量。

2）或者兩個，連續添加li，這樣滑塊永遠不會結束。只需繼續重複一遍又一遍？我猜想我需要不斷追加li項目以及在屏幕外移除它們。

我試圖創建一個jFiddle來顯示該問題。但它正在jFiddle上完成不同的事情，這更接近我所需要的。它似乎在某個時候停止移動。但它不需要完整的最後一個顯示。它與我在現場停止的現場有什麼不同呢？

任何幫助，非常感謝。我沒有搜索，發現this，但它似乎並沒有在這種情況下工作。非常感謝你。

我已經正在使用jQuery 1.10.2，PHP 5.4，TinyCarousel.js版本1.9

這是我目前有。的CSS

.PrevArrow { 
    width: 5%; 
    float: left; 
    margin-top: 20px; 
} 
.NextArrow { 
    width: 5%; 
    float: right; 
    margin-top: 20px; 
} 
.ListImage img { 
    margin-top: 5px; 
    margin-bottom: 10px; 
} 
#slider-code .viewport { 
    float: left; 
    width:90%; 
    height: 95px; 
    overflow: hidden; 
    position: relative; 
    margin-top: 5px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#slider-code .buttons { 
    display: block; 
    margin: 0px 10px 0 10px; 
    float: left; 
} 
#TickHead { 
    margin-top: 3px; 
} 
#slider-code .prev { 
    margin: 0 10px 0 10px; 
} 
#slider-code .next { 
    margin: 0 10px 0 10px; 
} 
#slider-code .disable { 
    visibility: hidden; 
} 
#slider-code .overview { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
.TestingTickerText { 
    vertical-align: top; 
    color: #666666; 
    font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif; 
    font-size: 10px; 
} 
#slider-code .overview li { 
    float: left; 
    margin: 0 20px 0 0; 
    padding: 1px; 
    height: 65px; 
    width: 105px; 
    left: 0; 
} 
#slider-code .pager { 
    overflow:hidden; 
    list-style: none; 
    clear: both; 
    margin: 0 0 0 45px; 
} 
#slider-code .pager li { 
    float: left; 
} 
#slider-code .pagenum { 
    text-decoration: none; 
    text-align: center; 
    padding: 5px; 
    color: #555555; 
    font-size: 14px; 
    font-weight: bold; 
    display: block; 
} 
#slider-code .active { 
    color: #fff; 
}

的PHP

<div id="slider-code"> 
    <div class="PrevArrow"> 
     <a href="#" class="prev"><img src="Link to Left Arrow"/></a> 
    </div> 
    <div class="viewport"> 
     <ul class="overview"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      etc... 
     </ul> 
    </div> 
    <div class="NextArrow"> 
     <a href="#" class="next"><img src="Link to Right Arrow"/></a> 
    </div>'; 
<center> 
     <span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span> 
    </center> 
</div>

jQuery的

(function ($) { 
    $(document).ready(function(){    
     $('#slider-code').tinycarousel({ display: 1}); 
    }); 
}(jQuery));

來源

2013-10-14 Pelligea

我想你遇到的問題是由於圖像的CSS定位。嘗試調整邊距，使它們稍微遠離彼此;這樣當沒有圖像被添加時，滑塊將停止並且不會有空間。如果這不是問題，請試試這個：

1：創建一個div並將所有滑塊圖像放入其中。

2：給每個箭頭按鈕一個單獨的div和class。

3：當用戶單擊任一按鈕時，使用jquery append函數動態地將圖像添加到滑塊類。

$(document).ready(function(){ 
    $('.arrowbutton').click(function(){ 
     $('.imageslider').append('.image'); 
    }); 
});

此外，請記住給你的圖像滑塊設置寬度在CSS中，並設置溢出隱藏。這應該確保沒有附加圖像超出滑塊，並且不出現滾動條。

來源

2013-10-14 05:55:28

jQuery滑塊在結束時動態停止或追加li項目以繼續

回答

相關問題