bootstrap轮播加触摸滑动效果，手机上效果很好

最新推荐文章于 2021-06-03 08:03:37 发布

weixin_34199335

最新推荐文章于 2021-06-03 08:03:37 发布

阅读量210

点赞数 1

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/CharmyZ/blog/704283

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!--banner-->
             <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:40px;" >
	           <ol class="carousel-indicators"  style="margin-bottom:-10px;">
		           <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="img/banner1.png" style="width: 100%; height:8%; " data-src=" " alt="First slide">
		       </div>
		    <div class="item">
			<img src="img/banner2.png" style="width: 100%; height:8%; " data-src="" alt="Second slide">	
		       </div>
		    <div class="item">
			<img src="img/banner3.png" style="width: 100%; height:8%; " data-src="" alt="Third slide">	
		</div>
	</div>
     <!-- Controls -->  
           <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="margin-top:80px; height:30px; display:none">&lsaquo;</a>
           <a class="right carousel-control" href="#myCarousel" data-slide="next" style="margin-top:80px; height:30px; display:none">&rsaquo;</a>
</div>

以上为html部分。

CSS：<link rel="stylesheet" href="css/bootstrap.min.css">

 <script>
    $('.carousel').carousel({
      interval: 4000
    })
</script>

以上为轮播的js部分 <script src="js/bootstrap.min.js"></script>

触摸滑动效果引用hammer.js插件

以下为触摸滑动的js部分：

 <script>
$('#myCarousel').hammer().on('swipeleft', function(){  
    $('#myCarousel').carousel('next');  
});  
  
$('#myCarousel').hammer().on('swiperight', function(){  
    $('#myCarousel').carousel('prev');  
}); 
</script>

这样就ok了，适用于手机端页面，html代码中的图片样式尺寸可以自己调节。用百分比比较好一些，可以做到响应式。

转载于:https://my.oschina.net/CharmyZ/blog/704283