swiper简介
看完这篇文章，你将毫不费力的会做一个轮播图，有手就能学会 。
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架。
可以用来快速的做一个论坛，或者其他更复杂的东西，当然这个东西是完全免费并开源，无论你使用在个人网站或商业网站，都无需付费，这也是我们选择的一个重要原因。
插件下载官网地址：官网：https://www.swiper.com.cn/
当然英文不好的朋友这还有个中文的：中文官网地址
当然在习之前需要下载这几个文件，然后引入我们的代码模块中。
需要注意的是以下案例都需要引入这两个文件：
1~6的案例只要引入这连个文件，然后复制粘贴代码就能看的效果的，自己看运行结果和代码注释可以更轻松的理解。
1.自动切换功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.min.css"/>
<style type="text/css">
#box1{
width: 600px;height: 300px;margin: 50px auto;
}
#box1 .sd1,#box1 .sd2,#box1 .sd3{
line-height: 300px;text-align: center;font-size: 50px;color: #838383;
}
#box1 .sd1{
background-color: red;}
#box1 .sd2{
background-color: green;}
#box1 .sd3{
background-color: blue;}
</style>
</head>
<body>
<!--swiper页面结构-->
<div class="swiper-container" id="box1"> <!-- 外层的大盒子 -->
<div class="swiper-wrapper"> <!-- swiper容器 -->
<div class="swiper-slide sd1">容器 1</div> <!-- swiper子容器，当然里面也可以放其他的元素 -->
<div class="swiper-slide sd2">容器 2</div>
<div class="swiper-slide sd3">容器 3</div>
</div>
</div>
<script src="swiper.min.js"></script>
<script>
//初始化一个Swiper实例 new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop:true, //开启环路，会在项目前后复制各一个,让Swiper看起来是循环的,默认为false
// autoplay:true, //开启自动切换，默认为false。值可以是布尔值，也可以是对象
autoplay:{
//当值为对象时，就是自动切换
delay:2000, //自动切换的时间间隔（单位ms）
// reverseDirection:true, //开启反方向自动切换
},
speed:1000, //从上一个元素切换到下一个元素所需要的时间：(单位：ms)
})
</script>
</body>
</html>
2.切换方向：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.min.css"/>
<style type="text/css">
#box1{
width: 600px;height: 300px;margin: 50px auto;
}
#box1 .sd1,#box1 .sd2,#box1 .sd3{
line-height: 300px;text-align: center;font-size: 50px;color: #fff;
font-weight: 600;
}
#box1 .sd1{
background-color: red;}
#box1 .sd2{
background-color: green;}
#box1 .sd3{
background-color: blue;}
</style>
</head>
<body>
<!--swiper页面结构-->
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">容器 1</div>
<div class="swiper-slide sd2">容器 2</div>
<div class="swiper-slide sd3">容器 3</div>
</div>
</div>
<script src="swiper.min.js"></script>
<script>
//初始化一个Swiper实例 new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop:true, //开启环路，会在项目前后复制各一个,让Swiper看起来是循环的,默认为false
autoplay:true, //开启自动切换，默认为false。值可以是布尔值，也可以是对象
initialSlide:2, //设置初始化时slide的索引,默认为0（网页一打开重第几张图开始播放）
direction: 'vertical', //Slides的切换方向，左右切换(horizontal)或上下切换(vertical)
grabCursor:true, //鼠标移入到元素上的时候光标变成手形，默认为false
})
</script>
</body>
</html>
3.切换的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.min.css"/>
<style type="text/css">
#box1{
width: 600px;height: 300px;margin: 50px auto;
}
#box1 .sd1,#box1 .sd2,#box1 .sd3{
line-height: 300px;text-align: center;font-size: 50px;color: #fff;
}
#box1 .sd1{
background-color: red;}
#box1 .sd2{
background-color: green;}
#box1 .sd3{
background-color: blue;}
</style>
</head>
<body>
<!--swiper页面结构-->
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">容器 1</div>
<div class="swiper-slide sd2">容器 2</div>
<div class="swiper-slide sd3">容器 3</div>
</div>
</div>
<script src="swiper.min.js"></script>
<script>
//初始化一个Swiper实例 new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop:true, //开启环路，会在项目前后复制各一个,让Swiper看起来是循环的,默认为false
autoplay:true, //开启自动切换，默认为false。值可以是布尔值，也可以是对象
//slide的切换效果:默认为位移切换(slide);
//effect:'slide', //默认为位移切换
//effect:'fade', //淡入淡出切换效果
effect:'cube', //以立方形式切换效果
// effect:'coverflow', //以3D流形式切换效果
// effect:'flip', //以3D翻转形式切换效果
})
</script>
</body>
</html>
4.设置分页器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.min.css"/>
<style type="text/css">
#box1{
width: 600px;height: 300px;margin: 50px auto;
}
#box1 .sd1,#box1 .sd2,#box1 .sd3{
line-height: 300px;text-align: center;font-size: 50px;color: #fff;
}
#box1 .sd1{
background-color: red;}
#box1 .sd2{
background-color: green;}
#box1 .sd3{
background-color: blue;}
.swiper-pagination-bullet{
width: 20px;height: 20px;
}
.swiper-pagination-bullet-active{
background-color:#00b959; /* 小按钮的颜色 */
}
</style>
</head>
<body>
<!--swiper页面结构-->
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">容器 1</div>
<div class="swiper-slide sd2">容器 2</div>
<div class="swiper-slide sd3">容器 3</div>
</div>
<!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-pagination"></div>
</div>
<script src="swiper.min.js"></script>
<script>
//初始化一个Swiper实例 new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop:true, //开启环路，会在项目前后复制各一个,让Swiper看起来是循环的,默认为false
//autoplay:true, //开启自动切换，默认为false。值可以是布尔值，也可以是对象
direction: 'horizontal', //Slides的切换方向，水平(horizontal)或垂直(vertical)
pagination: {
//分页器配置项
el: '.swiper-pagination', //分页器容器的css选择器
clickable:true, //为true点击分页器指示点会控制Swiper切换，默认为false(不控制)
type:'bullets',
// 分页器类型设置
//type:'bullets', //默认值，小圆点
//type:'fraction', //分式
//type:'progressbar', //进度条
//进度条分页器Slides的切换方向相反,只对进度条有效,默认为false
// progressbarOpposite:true,
},
})
</script>
</body>
</html>
5.左右按钮的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.min.css"/>
<style type="text/css">
#box1{
width: 600px;height: 300px;margin: 50px auto;
}
#box1 .sd1,#box1 .sd2,#box1 .sd3{
line-height: 300px;text-align: center;font-size: 50px;color: #fff;
}
#box1 .sd1{
background-color: red;}
#box1 .sd2{
background-color: green;}
#box1 .sd3{
background-color: blue;}
.swiper-container{
--swiper-theme-color: #55ffff;/* 设置Swiper风格 */
--swiper-navigation-color: #5d5d5d;/* 单独设置按钮颜色 */
--swiper-navigation-size: 65px;/* 设置按钮大小 */
}
</style>
</head>
<body>
<!--swiper页面结构-->
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">容器 1</div>
<div class="swiper-slide sd2">容器 2</div>
<div class="swiper-slide sd3">容器 3</div>
</div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-prev "></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
</div>
<script src="swiper.min.js"></script>
<script>
//初始化一个Swiper实例 new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('#box1', {
loop:true, //开启环路，会在项目前后复制各一个,让Swiper看起来是循环的,默认为false
navigation: {
nextEl: '.swiper-button-next', //控制左箭头能点击切换
prevEl: '.swiper-button-prev', //控制右箭头能点击切换
},
})
</script>
</body>
</html>
6.网格布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.min.css"/>
<style type="text/css">
#box{
width: 600px;height: 300px;margin: 50px auto;
}
#box.sd1,#box1 .sd2,#box1 .sd3{
line-height: 300px;text-align: center;font-size: 50px;color: #000000;
}
.swiper-slide{
text-align: center;line-height: 300px;
}
</style>
</head>
<body>
<!--swiper页面结构-->
<div class="swiper-container" id="box">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #ff0000;">容器 1</div>
<div class="swiper-slide" style="background-color: #ff5500;">容器 2</div>
<div class="swiper-slide" style="background-color: #ffff00;">容器 3</div>
<div class="swiper-slide" style="background-color: #00ff00;">容器 4</div>
<div class="swiper-slide" style="background-color: #4a580e;">容器 5</div>
<div class="swiper-slide" style="background-color: #0000ff;">容器 6</div>
</div>
</div>
<script src="swiper.min.js"></script>
<script>
//初始化一个Swiper实例 new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop:true,
slidesPerView:2, //同时显示的slide数量,可以为小数
slidesPerGroup:2, //切换一次的slide数量
//spaceBetween:20, //设置slide之间的间隔,默认为px,也可以设置成百分比(字符串)
spaceBetween:'15%', //百分比时按container的百分比
})
</script>
</body>
</html>
7.实战演练轮播图
实现的功能有：
1.自动切换效果
2.左右点击切换按钮
3.鼠标移入停止自动播放，鼠标移除开始自动播放
4.小按钮的颜色随着切换变颜色
5.点击小按钮进行切换到指定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.min.css"/>
<style type="text/css">
#box1{
width: 700px;height: 400px;margin: 50px auto;
}
#box1 .sd1,#box1 .sd2,#box1 .sd3{
line-height: 300px;text-align: center;font-size: 50px;color: #fff;
}
#box1 .sd1{
background-color: red;}
#box1 .sd2{
background-color: green;}
#box1 .sd3{
background-color: blue;}
.swiper-pagination-bullet{
width: 20px;height: 20px;
}
.swiper-pagination-bullet-active{
background-color:#ff0000; /* 小按钮的颜色 */
}
.swiper-container{
--swiper-theme-color: #55ffff;/* 设置Swiper风格 */
--swiper-navigation-color: #6b6b6b;/* 单独设置按钮颜色 */
--swiper-navigation-size: 65px;/* 设置按钮大小 */
}
img{
width: 100%;height: 100%;
}
</style>
</head>
<body>
<!--swiper页面结构-->
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1"><img src="https://file.icve.com.cn/ssykt/996/939/F92EAD815DDB5EED8493F59D0419A843.png?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0" ></div>
<div class="swiper-slide sd2"><img src="https://file.icve.com.cn/ssykt/374/532/5DB850874580BF739E70F2DB61FF9ACE.jpg?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0" ></div>
<div class="swiper-slide sd3"><img src="https://file.icve.com.cn/ssykt/325/801/516C8708AECDB05D7096820AE02CF331.png?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0" ></div>
<div class="swiper-slide sd3"><img src="https://file.icve.com.cn/ssykt/529/994/847F8836D4DFCDB60937D162A148C32B.png?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0" ></div>
</div>
<!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev "></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
</div>
<script src="swiper.min.js"></script>
<script>
//初始化一个Swiper实例 new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop:true, //开启环路，会在项目前后复制各一个,让Swiper看起来是循环的,默认为false
//autoplay:true, //开启自动切换，默认为false。值可以是布尔值，也可以是对象
direction: 'horizontal', //Slides的切换方向，水平(horizontal)或垂直(vertical)
pagination: {
//分页器配置项
el: '.swiper-pagination', //分页器容器的css选择器
clickable:true, //为true点击分页器指示点会控制Swiper切换，默认为false(不控制)
type:'bullets',
// 分页器类型设置
//type:'bullets', //默认值，小圆点
//type:'fraction', //分式
//type:'progressbar', //进度条
//进度条分页器Slides的切换方向相反,只对进度条有效,默认为false
// progressbarOpposite:true,
},
navigation: {
nextEl: '.swiper-button-next', //控制左箭头能点击切换
prevEl: '.swiper-button-prev', //控制右箭头能点击切换
},
autoplay:{
//当值为对象时，就是自动切换
delay:2000, //自动切换的时间间隔（单位ms）控制每2秒切换一次
// reverseDirection:true, //开启反方向自动切换
},
speed:1, //从上一个元素切换到下一个元素所需要的时间：(单位：ms)
})
var swp = document.getElementById("box1");
swp.onmouseenter=function(){
//鼠标移入停止自动切换
mySwiper.autoplay.stop();
};
swp.onmouseleave=function(){
//鼠标移除开始自动切换
mySwiper.autoplay.start();
};
</script>
</body>
</html>
效果运行图：左右的连个箭头是可以进行左右切换的。
有需要插件文件的朋友请留言。
当然这里只是讲了一点点，需要深入学习，可以看官网的文档教程：