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="data:images/banner01.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner02.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner03.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner04.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner05.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner06.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner07.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data: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>
swiper轮播图插件的更多相关文章
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
- vue轮播图插件之vue-awesome-swiper
移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...
- js 原生轮播图插件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
随机推荐
- SAS学习笔记1
数据采样 简单随机抽样,从sashelp数据集中air数据文件中选取30个数 数据探索 数字特征的探索:均值.频数.最大值.最小值.众数.中位数.方差.标准差 数字分布的探索:是否服从正态分布 连续型 ...
- UnicodeEncodeError: 'ascii' codec can't encode characters in position 18-22: ordinal not in range(128)
文件,放在site-package \Python27\Lib\site-packages sitecustomize.py # -*- coding: utf-8 -*- import sy ...
- 转：使用Goproxy解决golang.org模块无法下载的问题
原文https://studygolang.com/articles/22277?fr=sidebar 简介 Goproxy 中国完全实现了 Go 的模块代理协议.并且它是一个由中国备受信赖的云服务提 ...
- springboot自定义消息转换器HttpMessageConverter Spring Boot - 使用Gson替换Jackson
Jackson一直是springframework默认的json库,从4.1开始,springframework支持通过配置GsonHttpMessageConverter的方式使用Gson. 在典型 ...
- Dijkstra堆优化+邻接表
Dijkstra算法是个不错的算法,但是在优化前时间复杂度太高了,为O(nm). 在经过堆优化后(具体实现用的c++ STL的priority_queue),时间复杂度为O((m+n) log n), ...
- EasyPOI导入导出Excel
EasyPOI工具可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板 导入maven依赖 <dependency> <group ...
- unity读取Texture文件并转为Sprit
using System.Collections; using System.Collections.Generic; using System.IO; using UnityEngine; usin ...
- nodejs puppeteer linux(centos)环境部署以及用puppeteer简单截图
1.安装Node环境 如果有安装Node请忽略第1点 #下载cd /usr/local/srcwget https://nodejs.org/dist/v10.15.3/node-v10.15.3-l ...
- .net core中使用Quartz任务调度
使用xml配置Quartz任务调度程序 1.Nuget Install-Package Quartz Install-Package Quartz.Plugins 2.站点根目录下加入文件quartz ...
- cpython多进程
四 同步\异步and阻塞\非阻塞(重点) 同步: #所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不会返回.按照这个定义,其实绝大多数函数都是同步调用.但是一般而言,我们在说同步.异 ...