带有箭头的 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”属性时，您不能从顶部获取一个图像并将其附加到另一端，因为附加图像会将其他图像移动到另一个位置-> top 属性不会'不再正确了。

我认为贡献的滑块（例如http://www.jssor.com/demos/vertical-slider.slider）与 transform CSS 属性一起使用。 变换：translate3d() 试着研究一下这个属性。

Roko C. Buljan 在此页面上回答：loop carousel jquery 他使用 scrollTop 循环来解决您的问题。

前段时间我还写了一个简单的滑块。我现在已经实现了 Roku C. Buljan 方法。请随意查看我在 Bitbucket 上的代码。 https://bitbucket.org/d-stone/jqueryslider

摘录可以帮助您： 值 = 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 错误的原因。