Bootstrap的Carousel配合dropload.js實(shí)現(xiàn)移動(dòng)端滑動(dòng)切換圖片
輪播圖可以通過(guò)點(diǎn)擊按鈕來(lái)跳到上一張或者下一張,在移動(dòng)端我們常用的就是通過(guò)滑動(dòng)來(lái)實(shí)現(xiàn)一些時(shí)間,那么如何實(shí)現(xiàn)呢。
以下是通過(guò)bootstrap的Carousel和dropload.js(移動(dòng)端上下拉動(dòng)刷新插件)的實(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,//表示滑動(dòng)的距離 wipeLeftFn:function(){console.log("佐佐佐");carousel_.carousel('prev');},//向左滑動(dòng)屏幕 wipeRightFn:function(){console.log("呦呦呦");carousel_.carousel('next');},//向右滑動(dòng)屏幕 nowipe:function(){} });
以上所述是小編給大家介紹的Bootstrap的Carousel配合dropload.js實(shí)現(xiàn)移動(dòng)端滑動(dòng)切換圖片,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
js實(shí)現(xiàn)關(guān)閉網(wǎng)頁(yè)出現(xiàn)是否離開(kāi)提示
本篇文章主要給大家?guī)?lái)一個(gè)JS實(shí)用功能,監(jiān)聽(tīng)瀏覽器在關(guān)閉的時(shí)候提示出是否要離開(kāi)的小功能,需要的朋友學(xué)習(xí)下吧。2017-12-12微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過(guò)程解析
這篇文章主要介紹了微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02一文帶你掌握J(rèn)avaScript中的執(zhí)行上下文和作用域
作為一名前端工作人員,我們必須知道JavaScript內(nèi)部是如何執(zhí)行的。那對(duì)于執(zhí)行上下文和作用域的理解至關(guān)重要,無(wú)論是工作還是面試都是無(wú)法跳躍的一步,本文就來(lái)帶大家深入了解一下2023-02-02JS正則表達(dá)式替換字符串replace()方法實(shí)例代碼
正則表達(dá)式是用于匹配字符串中字符組合的模式,在js中正則表達(dá)式是對(duì)象,這篇文章主要給大家介紹了關(guān)于JS正則表達(dá)式替換字符串replace()方法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(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-04如何給ss bash 寫(xiě)一個(gè) WEB 端查看流量的頁(yè)面
由于剛畢業(yè)的窮大學(xué)生,和朋友合租了一臺(tái)服務(wù)器開(kāi)了多個(gè)端口提供 ss 服務(wù),懶得配置 ss-panel,就使用了 ss-bash 來(lái)監(jiān)控不同端口的流量,但每次都要等上服務(wù)器才能看到流量使用情況,很麻煩,于是就寫(xiě)了個(gè)簡(jiǎn)單的頁(yè)面來(lái)提供 WEB 訪問(wèn),具體內(nèi)容一起通過(guò)本文學(xué)習(xí)吧2017-03-03JS通過(guò)調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法示例
這篇文章主要介紹了JS通過(guò)調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法,結(jié)合具體實(shí)例形式分析了javascript微信支付接口的調(diào)用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-06-06