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

我建议您使用jCarousel或bxslider。有关bxslider示例的垂直滚动示例pf jCarousel和this，请查看this和this

Answer 2

以下是如何使用CSS3和HTML5获取垂直滑块效果的示例。

https://jsfiddle.net/cd3oezzj/

使用@keyframes规则。某些浏览器可能需要@-webkit-keyframes。

Answer 3

您可以使用

$(window).scrollTop()

Answer 4

只需将其放在下面：

<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按照我维持的顺序记录...

自动垂直图像滑块

4 个答案: