快速实现图片轮播
/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>
作者：小葱头ye
链接：https://www.jianshu.com/p/8c113c852bfd
随时随地看视频
