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

CSS3 と HTML5 を使用して垂直スライダーの効果を得る方法のサンプルを次に示します。

https://jsfiddle.net/cd3oezzj/

@keyframesルールを使用します。@-webkit-keyframes一部のブラウザでは必要になる場合があります。

于 2016-05-04T12:46:29.493 に答える
1

jCarouselまたはbxsliderを使用することをお勧めします。jCarouselの垂直スクロールの例については this とthisを、 bxslider の例については this をご覧ください。

于 2012-12-16T06:45:01.003 に答える
0

使用できます

$(window).scrollTop()
于 2012-12-16T06:23:27.963 に答える
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 に答える