帶箭頭的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垂直滑塊

回答

相關問題