日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

swiper轮播图插件

發布時間：2024/10/12 编程问答 44 豆豆
生活随笔 收集整理的這篇文章主要介紹了 swiper轮播图插件 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、簡介

①Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

②Swiper 是一款免費以及輕量級的移動設備觸控滑塊的框架，使用硬件加速過渡（如果該設備支持的話）。主要使用與移動端的網站、網頁應用程序（web apps），以及原生的應用程序（native apps）。

③主要是為IOS而設計的，同時，在Android、WP8系統以及現代桌面瀏覽器也有著良好的用戶體驗。

二、文檔

①中文網址：http://2.swiper.com.cn/

②中文網地址：http://www.swiper.com.cn/

③Swiper目前有Swiper2、Swiper3、Swiper4幾個版本，每個版本的使用方法可能會有所不同，具體參照文檔

三、使用方法

①加載

  • 首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
<link rel="stylesheet" href="path/to/swiper.min.css">......<script src="path/to/swiper.min.js"></script>
  • 如果你的頁面加載了jQuery.js或者zepto.js，你可以選擇使用更輕便的swiper.jquery.min.js
　　　 ...<link rel="stylesheet" href="path/to/swiper.min.css">...<script src="path/to/jquery.js"></script><script src="path/to/swiper.jquery.min.js"></script>

②HTML內容

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分頁器 --><div class="swiper-pagination"></div><!-- 如果需要導航按鈕 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滾動條 --><div class="swiper-scrollbar"></div> </div>

③初始化

  • 初始化Swiper：最好是挨著</body>標簽 （函數調用）
<script> var mySwiper = new Swiper ('.swiper-container', {direction: 'vertical',loop: true,// 如果需要分頁器 　　　　pagination: '.swiper-pagination',// 如果需要前進后退按鈕 　　　　nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',// 如果需要滾動條 　　　　scrollbar: '.swiper-scrollbar',}) </script> </body>
  • 如果不能寫在HTML內容的后面，則需要在頁面加載完成后再初始化
<script type="text/javascript">window.onload = function() {...} </script>或者這樣（Jquery和Zepto） <script type="text/javascript">$(document).ready(function () {...}) </script>

四、示例（輪播圖）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>輪播圖</title><!-- 引入swiper3.0 css文件 --><link rel="stylesheet" href="swiper/css/swiper.min.css"><style>*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;}ul{list-style: none;}a{text-decoration: none;}.container {position: relative;width: 750px;margin: 0 auto;} </style> </head> <body><!-- 版心 --><div class="container"><!-- 輪播圖 --><div class="swiper-container"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="images/banner01.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner02.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner03.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner04.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner05.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner06.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner07.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner08.jpg" alt=""></a></li></ul><!-- 分頁器 --><div class="swiper-pagination"></div></div></div><!-- 引入swiper3.0插件腳本 --><script src="swiper/js/swiper.min.js"></script><!-- js初始化腳本 --><script>window.onload=function(){/* 輪播圖 */new Swiper('.swiper-container',{autoplay:1000,loop:true,pagination:'.swiper-pagination',autoplayDisableOnInteraction:false });}</script> </body> </html>

?

轉載于:https://www.cnblogs.com/EricZLin/p/9359415.html

總結

以上是生活随笔為你收集整理的swiper轮播图插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。