欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年03月10日 17:21:27   作者:端著木魚敲代碼  
這篇文章主要介紹了bootstrap的Carousel配合dropload.js實(shí)現(xiàn)移動端滑動切換圖片,實(shí)現(xiàn)方法非常簡單,具有參考借鑒價(jià)值,需要的朋友可以參考下

輪播圖可以通過點(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)是否離開提示

    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)多選一功能過程解析

    這篇文章主要介紹了微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • 詳解關(guān)于webpack多入口熱加載很慢的原因

    詳解關(guān)于webpack多入口熱加載很慢的原因

    這篇文章主要介紹了詳解關(guān)于webpack多入口熱加載很慢的原因,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • 一文帶你掌握J(rèn)avaScript中的執(zhí)行上下文和作用域

    一文帶你掌握J(rèn)avaScript中的執(zhí)行上下文和作用域

    作為一名前端工作人員,我們必須知道JavaScript內(nèi)部是如何執(zhí)行的。那對于執(zhí)行上下文和作用域的理解至關(guān)重要,無論是工作還是面試都是無法跳躍的一步,本文就來帶大家深入了解一下
    2023-02-02
  • JS正則表達(dá)式替換字符串replace()方法實(shí)例代碼

    JS正則表達(dá)式替換字符串replace()方法實(shí)例代碼

    正則表達(dá)式是用于匹配字符串中字符組合的模式,在js中正則表達(dá)式是對象,這篇文章主要給大家介紹了關(guān)于JS正則表達(dá)式替換字符串replace()方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • javascript中的五種基本數(shù)據(jù)類型

    javascript中的五種基本數(shù)據(jù)類型

    在javascript中申明變量使用的關(guān)鍵字都是var,這點(diǎn)與其他的編程語言不盡相同,但是javascript亦含有五種基本的數(shù)據(jù)類型(也可以說是簡單數(shù)據(jù)類型),它們分別是:Undefined,Null,Boolean,Number和String。還含有一種復(fù)雜數(shù)據(jù)類型—Object。這里我們不談復(fù)雜數(shù)據(jù)類型
    2015-08-08
  • javascript驗(yàn)證身份證號

    javascript驗(yàn)證身份證號

    這篇文章主要介紹了javascript驗(yàn)證身份證號,十分的詳細(xì),需要的朋友可以參考下
    2015-03-03
  • Bootstrap項(xiàng)目實(shí)戰(zhàn)之子欄目資訊內(nèi)容

    Bootstrap項(xiàng)目實(shí)戰(zhàn)之子欄目資訊內(nèi)容

    Bootstrap項(xiàng)目實(shí)戰(zhàn)之資訊內(nèi)容,本文主要學(xué)習(xí)制作一下子欄目資訊內(nèi)容,感興趣的小伙伴們可以參考一下
    2016-04-04
  • 如何給ss bash 寫一個 WEB 端查看流量的頁面

    如何給ss bash 寫一個 WEB 端查看流量的頁面

    由于剛畢業(yè)的窮大學(xué)生,和朋友合租了一臺服務(wù)器開了多個端口提供 ss 服務(wù),懶得配置 ss-panel,就使用了 ss-bash 來監(jiān)控不同端口的流量,但每次都要等上服務(wù)器才能看到流量使用情況,很麻煩,于是就寫了個簡單的頁面來提供 WEB 訪問,具體內(nèi)容一起通過本文學(xué)習(xí)吧
    2017-03-03
  • JS通過調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法示例

    JS通過調(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

最新評論