Bootstrap的Carousel配合dropload.js實(shí)現(xiàn)移動端滑動切換圖片

第Bootstrap的Carousel配合dropload.js實(shí)現(xiàn)移動端滑動切換圖片輪播圖可以通過點(diǎn)擊按鈕來跳到上一張或者下一張，在移動端我們常用的就是通過滑動來實(shí)現(xiàn)一些時間，那么如何實(shí)現(xiàn)呢。

以下是通過bootstrap的Carousel和dropload.js（移動端上下拉動刷新插件）的實(shí)現(xiàn)方法。

HTML部分

divid="goods_lunbo"

divid="goods_lunbo2"

divid="carousel-example-generic0"data-ride="carousel"

!--Indicators--

lidata-target="#carousel-example-generic0"data-slide-to="0"/li

lidata-target="#carousel-example-generic0"data-slide-to="1"/li

lidata-target="#carousel-example-generic0"data-slide-to="2"/li

/ol

!--Wrapperforslides--

divid="carousel-inner-z"role="listbox"

div

imgwidth="100%"src="/bao/uploaded/i4/TB1LrSzIpXXXXaTXVXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"

!--div/div--

/div

div

imgwidth="100%"src="/bao/uploaded/i1/TB1RXNmHFXXXXanXFXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"

!--div/div--

/div

div

imgwidth="100%"src="/bao/uploaded/i1/TB1TjfsHVXXXXcSXVXXXXXXXXXX_!!1-item_pic.gif_220x220.jpg"

!--div/div--

/div

/div

/div

/div

/div

JS部分

varcarousel_=$("#carousel-example-generic0");

$("#goods_lunbo").touchwipe({

ReferenceMaterial:"#goods_lunbo2",//套的div

distance:100,//表示滑動的距離

wipeLeftFn:function(){console.log("佐佐佐");carousel_.carousel('prev');},//向左滑動屏幕

wipeRightFn:function(){console.log("呦呦呦");carousel_.carousel('next');},//向右滑動屏幕

nowipe:function(){}

});

以上所述是小編給大家介紹的Bootstrap的Carousel配合