亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

輪播圖可以通過(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)提示

    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ò)程解析

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

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

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

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

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

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

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

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

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

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

    這篇文章主要介紹了javascript驗(yàn)證身份證號(hào),十分的詳細(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 寫(xiě)一個(gè) WEB 端查看流量的頁(yè)面

    如何給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-03
  • JS通過(guò)調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法示例

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

最新評(píng)論