论坛首页 Web前端技术论坛

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

浏览 3446 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2016-05-25  
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
   发表时间:2016-05-29  
手滑动轮播----完整版在线预览,样式没完善
http://www.shiwen365.com/upload/demo/mcar1/mobileCarousel.jsp
0 请登录后投票
   发表时间:2016-06-04  
0 请登录后投票
   发表时间:2016-06-04  
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics