轮播效果,在手机上可以用手滑动轮播

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