添加滾動動畫列出jQuery的

我有一個列表，如果你點擊上一頁下一頁不言而喻左右，如圖this fiddle 添加滾動動畫列出jQuery的

HTML

<div> 
    <span id="prev">prev</span> 
     <ul id="scrolllist"> 
      <li><img src="http://dummyimage.com/100x100/000000/fff"></li> 
      <li><img src="http://dummyimage.com/100x100/f33636/fff"></li> 
      <li><img src="http://dummyimage.com/100x100/0c5b9e/fff"></li> 
      <li><img src="http://dummyimage.com/100x100/0c9e0c/fff"></li> 
     </ul> 
    <span id="next">next</span> 
    </div>

CSS

div { 
     float: left; 
     width: 550px; 
    } 
    li { 
     float: left; 
     list-style-type: none; 
     margin: 0 5px; 
    } 
    #prev { 
     cursor: pointer; 
     float: left; 
    } 
    #next { 
     cursor: pointer; 
     float: right; 
    }

$(function() { 
     $('#prev').click(function() { 
      var first = $('#scrolllist li:first-child'); 
      $('#scrolllist li').parent().append(first).animate({ "left": "-=50px" }, "slow"); 
     }); 
     $('#next').click(function() { 
      var last = $('#scrolllist li:last'); 
      $('#scrolllist li').parent().prepend(last).animate({ "left": "+=50px" }, "slow"); 
     }); 
    });

此功能適用於各種預期將它們移動，但是我希望在整個滾動列表項，讓他們在類似點擊的方向前進的什麼我需要的影響什麼可以http://coolcarousels.frebsite.nl/c/58/

可見要做到這一點工作？

來源

2014-01-09 ak85

您的移動追加。沒有動畫，因爲沒有任何動作。您的追加或預先考慮。 – Cam

對不起，你不得不回到繪圖板......除非他們有位置，否則你也不能移動對象。 – Cam

如果你想要一個如何動畫的例子，我有這個級聯的水平滑塊，我可以幫助你理解實例化。 http://jsfiddle.net/cornelas/LCDXj/ – Cam

正確的做法是將圖像放在隱藏的容器div中，然後根據需要將該容器左右移動，克隆列表中的第一個或最後一個img，然後添加或預先添加，具體取決於方向。

img容器div必須放置在另一個具有顯式高度和寬度的div中，且溢出設置爲隱藏。這可以防止用戶看到寬大的img容器。

下面是HTML：

<div> 
<span id="prev">prev</span> 
<div class="scroll-container"> 
    <div class="img-container"> 
     <img src="http://dummyimage.com/100x100/000000/fff"> 
     <img src="http://dummyimage.com/100x100/f33636/fff"> 
     <img src="http://dummyimage.com/100x100/0c5b9e/fff"> 
     <img src="http://dummyimage.com/100x100/0c9e0c/fff"> 
    </div> 
</div> 
<span id="next">next</span>

和JavaScript：

$(function() { 
$('#prev').click(function() { 
    if(!$('.img-container').is(':animated')) { 
     var first = $('.img-container img:first-child'); 
     var firstClone = first.clone(); 
     $('.img-container').append(firstClone); 
     $('.img-container').animate({ "left": "-=110px" }, "slow", function() { 
      first.remove(); 
      $('.img-container').css("left", "0"); 
     }); 
    } 
}); 
$('#next').click(function() { 
    if(!$('.img-container').is(':animated')) { 
     var last = $('.img-container img:last-child'); 
     var lastClone = last.clone(); 
     $('.img-container').css("left", "-110px"); 
     $('.img-container').prepend(lastClone); 
     $('.img-container').animate({ "left": "0" }, "slow", function() { 
      last.remove(); 
     }); 
    } 
}); 
});

注意 '如果不是動畫' 查看每個函數的開頭。這可以防止用戶在動畫完成之前再次運行功能（這會導致奇怪的錯誤）。

這裏是您的小提琴的修改版本：http://jsfiddle.net/fJqKV/17/

來源

2014-01-09 01:50:23 Cordle

添加滾動動畫列出jQuery的

回答

相關問題