浏览 3447 次
锁定老帖子 主题:轮播效果,在手机上可以用手滑动轮播
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2016-05-25
<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 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2016-05-29
手滑动轮播----完整版在线预览,样式没完善
http://www.shiwen365.com/upload/demo/mcar1/mobileCarousel.jsp |
|
返回顶楼 | |
发表时间:2016-06-04
|
|
返回顶楼 | |
发表时间:2016-06-04
|
|
返回顶楼 | |