发布于 2017-05-11 09:04:44 | 150 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


用bootstrap做出的项目轮播图在手机端不能滑动,为此找了好多插件、框架。但是都不能和bootstrap良好的结合。经过一番折腾终于找到了解决方法,下面小编通过本文给大家简单介绍下

用bootstrap做出的项目轮播图在手机端不能滑动,为此找了好多插件、框架。但是都不能和bootstrap良好的结合。

功夫不负有心人,经过一番查找终于在github找到了一段js:toucher.js,原文链接:https://github.com/bh-lay/toucher

由于个人水平原因代码没看懂抓狂,不过使用还是没问题滴。

第一.在head中加载toucher.js。


<script type="text/JavaScript" src="__PUBLIC__/home/js/toucher.js"></script>

第二.在轮播图页面实现触屏事件。

轮播图代码:


<div id="carousel-example-generic" class="carousel slide both" data-ride="carousel"> 
<!-- Indicators --> 
<ol class="carousel-indicators"> 
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
<li data-target="#carousel-example-generic" data-slide-to="1"></li> 
<li data-target="#carousel-example-generic" data-slide-to="2"></li> 
</ol> 
<!-- Wrapper for slides --> 
<div class="carousel-inner" role="listbox"> 
<div class="item active"> 
<img src="__PUBLIC__/home/img/banner_01.jpg" alt="..."> 
<div class="carousel-caption"> 
... 
</div> 
</div> 
<div class="item"> 
<img src="__PUBLIC__/home/img/banner_02.jpg" alt="..."> 
<div class="carousel-caption"> 
... 
</div> 
</div> 
<div class="item"> 
<img src="__PUBLIC__/home/img/banner_03.jpg" alt="..."> 
<div class="carousel-caption"> 
... 
</div> 
</div> 
</div> 
<!-- Controls --> 
<a id="carleft" class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a id="carright" class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
</a> 
</div> 
</div> 

js代码:


<script> 
var myTouch = util.toucher(document.getElementById('carousel-example-generic')); 
myTouch.on('swipeLeft',function(e){ 
$('#carright').click(); 
}).on('swipeRight',function(e){ 
$('#carleft').click(); 
}); 
</script>

ok手机端可以用了。

以上所述是小编给大家介绍的BootStrap实现手机端轮播图左右滑动事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持!



相关阅读 :
BootStrap实现手机端轮播图左右滑动事件
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
BootStrap实现轮播图效果(收藏)
利用BootStrap的Carousel.js实现轮播图动画效果
通过BootStrap实现轮播图的实际应用
在bootstrap中实现轮播图实例代码
Bootstrap每天必学之响应式导航、轮播图
Bootstrap轮播图学习使用
使用BootStrap进行轮播图的制作
使用BootStrap建立响应式网页——通栏轮播图(carousel)
基于bootstrap实现广告轮播带图片和文字效果
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务