快捷導航

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

更新時間：2017年03月10日 17:21:27 作者：端著木魚敲代碼

這篇文章主要介紹了bootstrap的Carousel配合dropload.js實現(xiàn)移動端滑動切換圖片,實現(xiàn)方法非常簡單，具有參考借鑒價值，需要的朋友可以參考下

輪播圖可以通過點擊按鈕來跳到上一張或者下一張，在移動端我們常用的就是通過滑動來實現(xiàn)一些時間，那么如何實現(xiàn)呢。

以下是通過bootstrap的Carousel和dropload.js（移動端上下拉動刷新插件）的實現(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實現(xiàn)移動端滑動切換圖片，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示
本篇文章主要給大家?guī)硪粋€JS實用功能，監(jiān)聽瀏覽器在關(guān)閉的時候提示出是否要離開的小功能，需要的朋友學習下吧。
2017-12-12
微信小程序復選框?qū)崿F(xiàn)多選一功能過程解析
這篇文章主要介紹了微信小程序復選框?qū)崿F(xiàn)多選一功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-02-02
詳解關(guān)于webpack多入口熱加載很慢的原因
這篇文章主要介紹了詳解關(guān)于webpack多入口熱加載很慢的原因，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
一文帶你掌握JavaScript中的執(zhí)行上下文和作用域
作為一名前端工作人員，我們必須知道JavaScript內(nèi)部是如何執(zhí)行的。那對于執(zhí)行上下文和作用域的理解至關(guān)重要，無論是工作還是面試都是無法跳躍的一步，本文就來帶大家深入了解一下
2023-02-02
JS正則表達式替換字符串replace()方法實例代碼
正則表達式是用于匹配字符串中字符組合的模式,在js中正則表達式是對象,這篇文章主要給大家介紹了關(guān)于JS正則表達式替換字符串replace()方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
javascript中的五種基本數(shù)據(jù)類型
在javascript中申明變量使用的關(guān)鍵字都是var，這點與其他的編程語言不盡相同，但是javascript亦含有五種基本的數(shù)據(jù)類型（也可以說是簡單數(shù)據(jù)類型），它們分別是：Undefined，Null，Boolean，Number和String。還含有一種復雜數(shù)據(jù)類型—Object。這里我們不談復雜數(shù)據(jù)類型
2015-08-08
javascript驗證身份證號
這篇文章主要介紹了javascript驗證身份證號,十分的詳細，需要的朋友可以參考下
2015-03-03
Bootstrap項目實戰(zhàn)之子欄目資訊內(nèi)容
Bootstrap項目實戰(zhàn)之資訊內(nèi)容，本文主要學習制作一下子欄目資訊內(nèi)容，感興趣的小伙伴們可以參考一下
2016-04-04
如何給ss bash 寫一個 WEB 端查看流量的頁面
由于剛畢業(yè)的窮大學生，和朋友合租了一臺服務(wù)器開了多個端口提供 ss 服務(wù)，懶得配置 ss-panel，就使用了 ss-bash 來監(jiān)控不同端口的流量，但每次都要等上服務(wù)器才能看到流量使用情況，很麻煩，于是就寫了個簡單的頁面來提供 WEB 訪問，具體內(nèi)容一起通過本文學習吧
2017-03-03
JS通過調(diào)用微信API實現(xiàn)微信支付功能的方法示例
這篇文章主要介紹了JS通過調(diào)用微信API實現(xiàn)微信支付功能的方法,結(jié)合具體實例形式分析了javascript微信支付接口的調(diào)用方法與相關(guān)注意事項,需要的朋友可以參考下
2017-06-06