Swiper常用于移動端網(wǎng)站的內(nèi)容觸摸滑動
Swiper是純javascript打造的滑動特效插件，面向手機(jī)晋辆、平板電腦等移動終端渠脉。
Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換瓶佳、觸屏多圖切換等常用效果芋膘。
Swiper開源、免費(fèi)霸饲、穩(wěn)定为朋、使用簡單、功能強(qiáng)大厚脉，是架構(gòu)移動終端網(wǎng)站的重要選擇习寸！
[Swiper]http://www.swiper.com.cn/
1、將idangerous.swiper.min.js傻工，idangerous.swiper.css加入到項(xiàng)目中
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>
基礎(chǔ)使用如此簡單，后續(xù)更多效果請親們自行去官方查閱學(xué)習(xí)中捆。
