html:
<div id="myCarousel" class="imageHead carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#myCarousel" data-slide-to="1" >
</li>
<li data-target="#myCarousel" data-slide-to="2" >
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.runoob.com/wp-content/uploads/2014/07/slide1.png" alt="slide" class="image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://www.runoob.com/wp-content/uploads/2014/07/slide2.png" alt="slide" class="image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="slide" class="image">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
js:
$('#myCarousel').carousel({
interval: 2500
}
);
$('#myCarousel').hammer().on('swipeleft', function(){
$(this).carousel('next');
}
);
$('#myCarousel').hammer().on('swiperight', function(){
$(this).carousel('prev');
}
);
$('#myCarousel').hammer().on('press', function(){
$(this).carousel('pause');
}
);
$('#myCarousel').hammer().on('pressup', function(){
$(this).carousel('cycle');
}
);
演示效果:
http://www.jscssshare.com/#/sample/JcZQH9Br
轮播效果,在手机上可以用手滑动轮播
猜你喜欢
转载自coosummer.iteye.com/blog/2300923
今日推荐
周排行