带箭头的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

我认为，你不可能尝试解决这个问题。 因为，当您使用“顶部”属性时，您无法从顶部拍摄一张图像并将其附加到另一端，因为附加图像会将其他图像移动到另一个位置 - ＆gt;顶级属性不再正确。

我认为贡献的滑块（例如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 Validator）。里面有一些错误。 无效的HTML可能是一些CSS和Javascript错误的原因。