快速实现图片轮播
/n
了解Swiper
是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.swiper-container{
width: 100%;
height: 100%;
/*width: 500px;*/
/*height: 500px;*/
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Monaco; color:
#2b7ec3}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Monaco;
color: #d74200}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px
Monaco; color: #289c97}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font:
20.0px Monaco}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px
Monaco; color: #4a8a01}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font:
20.0px Monaco; color: #060606}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px;
font: 20.0px Monaco; color: #a5b2b9}p.p8 {margin: 0.0px 0.0px 0.0px
0.0px; font: 20.0px Monaco; color: #4f5d66}p.p9 {margin: 0.0px 0.0px
0.0px 0.0px; font: 20.0px Monaco; color: #4f5d66; min-height:
27.0px}p.p10
{margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Monaco; color: #ad42ef;
min-height: 27.0px}span.s1 {color: #4f5d66}span.s2 {color:
#2b7ec3}span.s3 {color: #48565d}span.s4 {color: #289c97}span.s5 {color:
#d74200}span.s6 {color: #929151}span.s7 {color: #060606}span.s8 {color:
#ad42ef}span.s9 {color: #4a8a01}span.s10 {color: #698906}span.s11
{color: #000000}span.s12 {color: #d16400}span.s13 {color:
#a5b2b9}span.s14 {color: #4663cc}span.Apple-tab-span {white-space:pre}
</style>
</head>
<body>
<div class="swiper-container"> <!--//固定写法 表示一个容器-->
<div class="swiper-wrapper">
<div class="swiper-slide">1
</div> <!--几个页面写几个div-->
<div class="swiper-slide">2
</div>
<div class="swiper-slide">3
</div>
<div class="swiper-slide">4
</div>
<div class="swiper-slide">5
</div>
</div> <!--//主体内容-->
<!-- 小点-->
<div class="swiper-pagination"></div>
<!-- 左右按钮-->
<div class="swiper-button-prev"></div> <!--//上一页-->
<div class="swiper-button-next"></div> <!--//xia一页-->
</div>
</body>
</html>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">
var swiper = new Swiper(".swiper-container",{
// 1. 分页容器（小点） (键值对形式 用逗号分隔)
pagination:".swiper-pagination",
// 小点可以点击
paginationClickable:".swiper-pagination",
//下一页按钮
nextButton:".swiper-button-next",
prevButton:".swiper-button-prev",
//每页之间的空隙
spaceBetween:20
}); //新建一个对象
// 滑动 swiper-container这个容器 固定写法
</script>