带箭头的js垂直滑块

事情是我需要制作一个垂直图像滑块，这样当我按下箭头键/向上箭头键时，每个图像都会改变它的位置（最高的一个滑下去，之前取下它的位置）它应该是这样的：带箭头的js垂直滑块

什么我有这么远：

$(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>

感谢您的任何意见

来源

2017-03-06 Michael97

我认为，像你试图解决这个问题是不可能的。因为，当你使用“top”属性时，你不能从顶部拍摄一张图像并将其追加到另一端，因为追加图像会将其他图像移动到另一个地方 - >顶部属性wouldn不再是正确的。

我认为贡献滑块（例如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错误的原因。

来源

2017-03-06 17:11:03

带箭头的js垂直滑块

回答

相关问题