Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
[Swiper]http://www.swiper.com.cn/
1、将idangerous.swiper.min.js，idangerous.swiper.css加入到项目中
2、加入代码块
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper_Demo</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<script src="js/idangerous.swiper.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.swiper-container {
width: 1000px;
height: auto;
color: #fff;
text-align: center;
}
.img{
display:block; margin:0 auto;
width: 1000px;
}
.pagination {
position: absolute;
z-index: 20;
bottom: 10px;
text-align: center;
width: 100%;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #FF4040;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/p1.jpg" class="img"></div>
<div class="swiper-slide"><img src="img/p2.jpg" class="img"></div>
<div class="swiper-slide"><img src="img/p3.jpg" class="img"></div>
</div>
<div class="pagination"></div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
loop: true,
autoplay: 2000,
});
</script>
</body>
</html>
基础使用如此简单，后续更多效果请亲们自行去官方查阅学习。
