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>
基礎使用如此簡單，后續更多效果請親們自行去官方查閱學習。
