Bootstrap的Carousel配合dropload.js實(shí)現(xiàn)移動端滑動切換圖片
輪播圖可以通過點(diǎn)擊按鈕來跳到上一張或者下一張,在移動端我們常用的就是通過滑動來實(shí)現(xiàn)一些時(shí)間,那么如何實(shí)現(xiàn)呢。
以下是通過bootstrap的Carousel和dropload.js(移動端上下拉動刷新插件)的實(shí)現(xiàn)方法。
HTML部分
<div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;"> <div id="goods_lunbo2" style="width:50%;overflow:hidden;margin:0 auto;"> <div id="carousel-example-generic0" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic0" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic0" data-slide-to="1"></li> <li data-target="#carousel-example-generic0" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" id="carousel-inner-z" role="listbox"> <div class="item active"> <img width="100%" src="http://img04.taobaocdn.com/bao/uploaded/i4/TB1LrSzIpXXXXaTXVXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" > <!--<div class="carousel-caption"></div>--> </div> <div class="item"> <img width="100%" src="http://img01.taobaocdn.com/bao/uploaded/i1/TB1RXNmHFXXXXanXFXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" > <!--<div class="carousel-caption"></div>--> </div> <div class="item"> <img width="100%" src="http://img01.taobaocdn.com/bao/uploaded/i1/TB1TjfsHVXXXXcSXVXXXXXXXXXX_!!1-item_pic.gif_220x220.jpg" > <!--<div class="carousel-caption"></div>--> </div> </div> </div> </div> </div>
JS部分
var carousel_=$("#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配合dropload.js實(shí)現(xiàn)移動端滑動切換圖片,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
js實(shí)現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示
本篇文章主要給大家?guī)硪粋€JS實(shí)用功能,監(jiān)聽瀏覽器在關(guān)閉的時(shí)候提示出是否要離開的小功能,需要的朋友學(xué)習(xí)下吧。2017-12-12微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過程解析
這篇文章主要介紹了微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02一文帶你掌握J(rèn)avaScript中的執(zhí)行上下文和作用域
作為一名前端工作人員,我們必須知道JavaScript內(nèi)部是如何執(zhí)行的。那對于執(zhí)行上下文和作用域的理解至關(guān)重要,無論是工作還是面試都是無法跳躍的一步,本文就來帶大家深入了解一下2023-02-02JS正則表達(dá)式替換字符串replace()方法實(shí)例代碼
正則表達(dá)式是用于匹配字符串中字符組合的模式,在js中正則表達(dá)式是對象,這篇文章主要給大家介紹了關(guān)于JS正則表達(dá)式替換字符串replace()方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07Bootstrap項(xiàng)目實(shí)戰(zhàn)之子欄目資訊內(nèi)容
Bootstrap項(xiàng)目實(shí)戰(zhàn)之資訊內(nèi)容,本文主要學(xué)習(xí)制作一下子欄目資訊內(nèi)容,感興趣的小伙伴們可以參考一下2016-04-04JS通過調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法示例
這篇文章主要介紹了JS通過調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法,結(jié)合具體實(shí)例形式分析了javascript微信支付接口的調(diào)用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-06-06