1. 程式人生 > >Boostrap輪圖片可以左右滑動

Boostrap輪圖片可以左右滑動

ria family asc 簡單的 min left 底部 需要 otc

記得引用Boostrap的js和css

html代碼:

<div id="Mycarousel" class="carousel slide col-md-12" data-ride="carousel" data-interval="4000" >
            <!-- 底部的指示小圓點-->
            <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="img/banner.png" width="100%" /> </div> <div class="item"> <img src="img/banner.png" width="100%"/> </div> <div class="item "> <
img src="img/banner.png" width="100%"/> </div> </div> </div>

一個比較簡單的方法是增加一個滑動手勢js插件:hammer.js,網上有很多cdn調用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我們在head中加載一下然後再通過javascript把swipe功能調用出來就可以了

關鍵的步驟來了,我們需要寫一個javascript命令調用hammer.js中的swipe功能

<script>
$(function(){
var myElement= document.getElementById(‘Mycarousel)
var hm=new Hammer(myElement); hm.on("swipeleft",function(){ $(‘#Mycarousel‘).carousel(‘next‘) }) hm.on("swiperight",function(){ $(‘#Mycarousel‘).carousel(‘prev‘) }) }) </script>

1.引用bootstrap的js方法,但是只能實現定時圖片輪播

<div id="Mycarousel" class="carousel slide col-md-12" data-ride="carousel" data-interval="4000" >
<!-- 底部的指示小圓點-->
<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="img/banner.png" width="100%" />


</div>
<div class="item">
<img src="img/banner.png" width="100%"/>
</div>
<div class="item ">
<img src="img/banner.png" width="100%"/>
</div>
</div>

</div>

2.添加手勢觸摸輪播,引用hammer.js

<script src="js/hammer.min.js"></script>

3.添加js代碼在script中

$(function(){
var myElement=document.getElementById(‘Mycarousel‘);
var hm=new Hammer(myElement);
hm.on("swipeleft",function(){
$(‘#Mycarousel‘).carousel(‘next‘);
})
hm.on("swiperight",function(){
$(‘#Mycarousel‘).carousel(‘prev‘);
})
});

Boostrap輪圖片可以左右滑動