自動垂直圖像滑塊

Question

我需要幫助來創建一個垂直圖像滑塊，它會自動間隔地滑動圖像。

HTML：

<div id="myCarousel" class="carousel slide"> 
<!-- Carousel items --> 
<div class="carousel-inner"> 
<div class="active item"> 
<img src="img/1.jpg" /> 
</div> 
<div class="item"> 
<img src="img/2.jpg" /> 
</div> 
<div class="item"> 
<img src="img/3.jpg" /> 
</div> 
<div class="item"> 
<img src="img/4.jpg" /> 
</div> 
</div> 
<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

的Javascript：

<script type="text/javascript"> 
$(document).ready(function() { 
$('.carousel').carousel({ interval: 3000 }); 
}); 
</script> 

我需要垂直同樣的事情。

Answer 1

您可以使用

$(window).scrollTop() 

Answer 2

我會建議你使用jCarousel或bxslider。看看this和this垂直滾動例如PF的jCarousel和this爲bxslider例如

Answer 3

只是把這個如下：

<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src= "js/bootstrap.js"></script> 
<script type="text/javascript"> 
    var $ = jQuery.noConflict(); 
    $(document).ready(function() { 
    $('#myCarousel').carousel({ interval: 2000, cycle: true }); 
    }); 
</script> 

PLZ maimtain序列爲我保持...

Answer 4

這裏是如何使用CSS3和HTML5來獲得垂直滑塊效果的示例。

https://jsfiddle.net/cd3oezzj/

用途@keyframes規則。某些瀏覽器可能需要使用@-webkit-keyframes。