0

我需要帮助来创建一个垂直图像滑块，它会以间隔自动滑动图像。

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>

我需要垂直相同的东西。

4

4 回答 4

1

我建议您使用jCarousel或bxslider。看看这个和这个垂直滚动示例 pf jCarousel 和这个bxslider 示例

于 2012-12-16T06:45:01.003 回答
1

这是一个如何使用 CSS3 和 HTML5 来获得垂直滑块效果的示例。

https://jsfiddle.net/cd3oezzj/

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

于 2016-05-04T12:46:29.493 回答
0

把它放在下面：

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

请按照我维护的顺序维护序列...

于 2014-03-13T07:44:04.310 回答
0

您可以使用

$(window).scrollTop()
于 2012-12-16T06:23:27.963 回答