快捷導(dǎo)航

swiper移動(dòng)端輪播插件（觸碰圖片之后停止輪播）

更新時(shí)間：2017年12月28日 11:02:16 作者：彩筆_小qing

這篇文章主要為大家詳細(xì)介紹了swiper移動(dòng)端輪播插件，觸碰圖片之后停止輪播，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了swiper移動(dòng)端輪播插件，供大家參考，具體內(nèi)容如下

下面是我遇到的問(wèn)題，也是用此插件常用的幾個(gè)參數(shù)，如果你的輪播不需要很復(fù)雜，看本文就可以解決。假如你想多了解些，看官們這里請(qǐng) swiper 插件的官方地址。

第一步 引入 swiper.min.js

<script src="../style/js/swiper.min.js"></script>

第二步 html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner1.jpg">
    </div>
    <div class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner2.jpg">
    </div>
    <div class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner3.jpg">
    </div>
  </div>
  <div class="swiper-pagination"></div> <!--需要輪播序號(hào)的時(shí)候?qū)?->
</div>

第三步 調(diào)用 ( 重點(diǎn)來(lái)了 )

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000
});

現(xiàn)在這種情況下，圖片可以自動(dòng)輪播，但是當(dāng)用手觸碰之后，就會(huì)停止輪播，所以要再添加一個(gè)參數(shù)

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000,
    autoplayDisableOnInteraction : false  /* 注意此參數(shù)，默認(rèn)為true */ 
});

無(wú)論怎么滑，輪播事件都會(huì)重新觸發(fā)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中的Proxy代理的用法和功能詳解
Proxy代理是JavaScript中一項(xiàng)強(qiáng)大而靈活的功能，它可以用于攔截、修改和自定義對(duì)象的底層操作，這篇文章主要介紹了JavaScript中的Proxy代理的各種用法和功能,需要的朋友可以參考下
2023-06-06
基于JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮彈出跟隨鼠標(biāo)移動(dòng)的帶箭頭的信息層
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮彈出跟隨鼠標(biāo)移動(dòng)的帶箭頭的信息層的相關(guān)資料,需要的朋友可以參考下
2016-01-01
從階乘函數(shù)對(duì)比Javascript和C#的異同
今天學(xué)習(xí)Javascript函數(shù)，發(fā)現(xiàn)這完全是一個(gè)神奇的東西。跟我們平常所見(jiàn)強(qiáng)類(lèi)型語(yǔ)言中的函數(shù)有好多不同。下面我們就從C#和JavaScript的兩個(gè)計(jì)算階乘的函數(shù)中比較兩者的異同
2012-05-05
一文詳解JS?類(lèi)型轉(zhuǎn)換方法以及如何避免隱式轉(zhuǎn)換
這篇文章主要為大家介紹了JS?類(lèi)型轉(zhuǎn)換方法以及如何避免隱式轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
Js通過(guò)AES加密后PHP用Openssl解密的方法
這篇文章主要給大家介紹了關(guān)于Js如何通過(guò)AES加密后PHP利用Openssl解密的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
Bootstrap導(dǎo)航簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap導(dǎo)航的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
微信小程序之video組件視頻播放
video控件是微信小程序提供的系統(tǒng)組件之一,用于實(shí)現(xiàn)播放視頻的功能,這篇文章主要給大家介紹了關(guān)于微信小程序之video組件視頻播放的相關(guān)資料,需要的朋友可以參考下
2022-04-04
webpack配置proxyTable時(shí)pathRewrite無(wú)效的解決方法
這篇文章主要介紹了webpack配置proxyTable時(shí)pathRewrite無(wú)效的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
使用do...while的方法輸入一個(gè)月中所有的周日(實(shí)例代碼)
下面小編就為大家?guī)?lái)一篇使用do...while的方法輸入一個(gè)月中所有的周日(實(shí)例代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
HTML頁(yè)面如何象ASP一樣接受參數(shù)
HTML頁(yè)面如何象ASP一樣接受參數(shù)...
2007-02-02