帶箭頭的js垂直滑塊

Question

問題是我需要制作一個垂直圖像滑塊，這樣當我按下箭頭向下/向上箭頭時，每個圖像都會改變它的位置（最高的一個位於底部，前一個位於它的位置）它應該是什么樣子：

到目前為止我得到了什么：

 $(function(){ var $vsliderboxes = $('#vsliderboxes'), $vslidernav = $('#vslidernav'), boxHeight = $vsliderboxes.height(), current_index = 0; function clickslide(){ clearInterval(intervalTimer); clearTimeout(timeoutTimer); timeoutTimer = setTimeout(function () { intervalTimer = window.setInterval(autoslide, 2000); }, 2500); var index = $(this).index(); current_index = index; $vsliderboxes.children().stop().animate({ top : (boxHeight * index * -1) }, 500); } function autoslide(){ current_index++; if (current_index >= $vsliderboxes.children().children().length) { current_index = 0; } $vslidernav.find('a').eq(current_index).trigger('click'); } $vslidernav.find('a').click(clickslide); var intervalTimer = window.setInterval(autoslide, 2000), timeoutTimer = null; }); 

 #vslidernav ul { list-style: none; padding: 0; } #vslidernav ul a { padding: 0; cursor: pointer; height: 50px; } #vslidernav ul a:active { color: #9C9A99; } #vslidernav ul a li { height: 50px; } #vslidernav ul .active li { } .#vslidernav ul a:active { background: transparent; color: #9C9A99; } .vslider { display: inline-block; } #vslidernav { float: left; width: 100px; z-index: 1; height: 250px; } #vsliderboxes { position : relative; overflow : hidden; } #vsliderboxes div { height: 250px; width: 900px; } #vsliderboxs-inner { position : relative; width : 900px; height : 250px; } 

 <div class="vslider"> <div id="vslidernav"> <ul> <a id="1"> <li><img src="img/arrtop.gif"></li> </a> <a id="2"> <li><img src="img/arrdown.gif"></li> </a> <a id="3"> <li></li> </a> </ul> </div> <div id="vsliderboxes"> <div id="vsliderboxs-inner"> <div id="box1" class="active"><img src="img/slide1.gif"></div> <div id="box2" class="inactive"><img src="img/slide2.gif"></div> <div id="box3" class="inactive"><img src="img/slide3.gif"></div> </div> </div> </div> 

謝謝你的建議

Answer 1

我認為，就像你試圖解決這個問題一樣是不可能的。 因為，當您使用“top”屬性時，您無法從頂部獲取一個圖像並將其附加到另一端，因為附加圖像會將其他圖像移動到另一個位置 - >頂部屬性將不會再說不過了。

我認為貢獻的滑塊（例如http://www.jssor.com/demos/vertical-slider.slider ）可以使用轉換CSS屬性。 transform：translate3d（）嘗試研究這個屬性。

Roko C. Buljan在這個頁面上回答： loop carousel jquery他使用scrollTop循環來解決你的問題。

我前段時間也寫了一個簡單的滑塊。 我現在已經實現了Roku C. Buljan方法。 隨意在Bitbucket上查看我的代碼。 https://bitbucket.org/d-stone/jqueryslider

摘錄可以幫到你：value = prev_or_next =='next'？ self.globals.slide_height：0;

last = $('#container').find('> div:last');
first = $('#container').find('> div:first');

if(prev_or_next == 'prev') { // click on "next"-button
    first.before(last);      // put last element before first
    settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
    duration: settings.slide_speed,
    done: function() {
        if(prev_or_next == 'next') {
            // put first item after last
            last.after(first);
        }
    }
});

我建議你驗證你的HTML（W3C驗證器）。 里面有一些錯誤。 無效的HTML可能是一些CSS和Javascript錯誤的原因。