js vertikale Schieberegler mit Pfeilen

Question

Die Sache ist, dass ich einen vertikalen Bilder Slider machen muss, so dass, wenn ich Pfeil nach unten/Pfeil nach oben drücken jedes Bild ändert seine Position (die höchste geht nach unten, die vorherige nehmen es) was es sollte wie folgt aussehen:

, was ich bisher habe:

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

dank für jede Beratung

Answer 1

Ich denke, dass es nicht möglich ist, dieses Problem zu lösen, wie Sie es versuchen. Wenn Sie mit der Eigenschaft "top" arbeiten, können Sie kein Bild von oben aufnehmen und es an das andere Ende anhängen, da das Bild angehängt wird und die anderen Bilder an eine andere Stelle verschoben werden -> die oberste Eigenschaft würde nicht Stimmt nicht mehr.

Ich denke, die beigetragenen Schieberegler (z. B. http://www.jssor.com/demos/vertical-slider.slider) arbeiten mit der CSS-Eigenschaft transform. transform: translate3d() Versuchen Sie, über diese Eigenschaft zu recherchieren.

Roko C. Buljan antwortete auf dieser Seite: loop carousel jquery Er verwendet eine ScrollTop-Schleife für Ihr Problem.

Ich habe vor einiger Zeit auch einen einfachen Schieberegler geschrieben. Ich habe jetzt die Roku C. Buljan-Methode implementiert. Fühlen Sie sich frei, um meinen Code auf Bitbucket zu sehen.

Ein Auszug kann Ihnen helfen: 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); 
     } 
    } 
}); 

Ich rate Ihnen, Ihre HTML (W3C Validator) zu validieren. Darin sind einige Fehler enthalten. Ungültiger HTML-Code kann der Grund für einige CSS- und JavaScript-Fehler sein.