左右動畫列表項目

我有一張8張圖片的小圖片幻燈片，但只顯示5張圖片，其他圖片隱藏。左右動畫列表項目

這是HTML

<div id="itemsListBox"> 
    <ul> 
     <li><img src="images/home-items/washing_machine.png" alt="" /></li> 
     <li><img src="images/home-items/refrigerator.png" alt="" /></li> 
     <li><img src="images/home-items/dishwasher.png" alt="" /></li> 
     <li><img src="images/home-items/ovens_stoves_hobs.png" alt="" /></li> 
     <li><img src="images/home-items/extractors.png" alt="" /></li> 
     <li><img src="images/home-items/microwave_oven.png" alt="" /></li> 
     <li><img src="images/home-items/coffee_makers.png" alt="" /></li> 
     <li><img src="images/home-items/washer_dryer.png" alt="" /></li> 
     <li><img src="images/home-items/tumble_dryer.png" alt="" /></li> 
    </ul> 
</div>

而CSS：

#itemsListBox { 
    position: absolute; 
    top: 90px; 
    width: 100%; 
    padding: 0 10%; 
    overflow: hidden; 
} 
#itemsListBox ul { 
    white-space: nowrap; 
    overflow: hidden; 
} 
#itemsListBox ul li{ 
    list-style-type: none; 
    display: inline-block; 
    width: 18%; 
    margin: 1%; 
} 
#itemsListBox ul li img { 
    width: 100%;  
}

我可以用這個代碼移動圖像：

$("#rightArrow").click(function(e) { 
     var curr = $("#itemsListBox ul li:last"); 
     curr.parent().prepend(curr); 
    }); 
$("#leftArrow").click(function(e) { 
     var curr = $("#itemsListBox ul li:first"); 
     curr.parent().append(curr); 
    });

但我想的東西要做到這一點動畫。任何想法？

這裏有一個現場演示： http://jsfiddle.net/Bergkamp/shnyH/

來源

2013-07-16 Bergkamp

請比「某物」更具體。 –

你可以嘗試這樣的：

設置你的形象定位爲相對在你的CSS：相反的追加和預先準備使用

img {position:relative;}

和Jquery的動畫功能來改變左邊的位置。

$("img").animate({ 
    left: "-=150px", 
    }, "slow");

看到編輯例子：

http://jsfiddle.net/z3PzC/

來源

2013-07-16 16:42:04 Anass

這裏有一個幻燈片的例子向下/使用圖像滑動畫：http://jsfiddle.net/Jag96/5VDTL/

這裏的主要障礙是，你是隱藏幾張圖片，一次只顯示5張，因此您需要在第一張和第五張元素上設置動畫：

$("#itemsListBox ul li:nth-child(5)").slideUp("slow", function() { 
    curr.hide().prependTo(curr.parent()).slideDown(); 
});

如果您需要更多自定義動畫，還可以使用jQuery .animate（）方法。

來源

2013-07-16 18:35:46

左右動畫列表項目

回答

相關問題