带箭头的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错误的原因。