我試圖創建一個旋轉木馬,我第一次嘗試。 http://jsfiddle.net/PmNM5/Verticle旋轉木馬jQuery
HTML保持UL LI,每個L1具有2個圖像兩積累的242px寬度和高度= 81px
缺貨幾個LI中,只有3應該是可見的(即,6個圖像將是visble,作爲一個LI保持2圖像,浮動:每個都留下。)
UL:設置爲顯示BLOCK,寬度爲242px。 HTML顯示完美。但旋轉木馬不起作用,因爲我知道我需要聰明地計算出我缺乏的TOP。
<div id="home_carousel">
<ul>
<li>
<a href="#img1" class="inline cboxElement"><img src="images/home-truck1.jpg"></a>
<a href="#"><img src="images/home-truck1.jpg"></a>
</li>
<li>
<a href="#"><img src="images/home-truck1.jpg"></a>
<a href="#"><img src="images/home-truck1.jpg"></a>
</li>
<li>
<a href="#"><img src="images/home-truck1.jpg"></a>
<a href="#"><img src="images/home-truck1.jpg"></a>
</li>
<li>
<a href="#"><img src="images/home-truck1.jpg"></a>
<a href="#"><img src="images/home-truck1.jpg"></a>
</li>
JAVASCRIPT:
var myCarousel = {
setHeight: function() {
var $img = $('li', '#home_carousel');
var total = 81 * $img.length;
$('#home_carousel ul').height(total);
},
slide: function() {
var outPart = $('#home_carousel ul').outerHeight();
$('#home_carousel_up').on('click', function() {
var $a = $(this);
$('#home_carousel ul').animate({
top: -81 + outPart + 'px'
}, 500, 'easeOutBounce');
});
$('#home_carousel_down').on('click', function() {
var $a = $(this);
$('#home_carousel ul').animate({
top: 81 + 'px'
}, 500, 'easeOutBounce');
});
},
init: function() {
this.setHeight();
this.slide();
}
};
myCarousel.init();
「easeOutBounce」未在基本JQuery庫中定義。你還包括JQuery UI效果庫嗎? – 2013-03-21 05:13:15
我試過這個工作,但我的問題是旋轉木馬不起作用後第二次點擊。由於即時通訊使用TOP的靜態值動畫。我需要一個關於如何每次獲得動態TOP的UL幫助! – STEEL 2013-03-21 05:25:21
這樣的事情。 http://jsfiddle.net/PmNM5/10/ – user991554 2013-03-21 05:52:54