一 關於Swipercss
swiper是一款輕量級以及免費的移動設備觸控滑塊的js框架，主要運用於移動端的操做，但也能夠用於pc端頁面效果製做，徹底的開源免費，html
二 學習Swiperjquery
Swiper官網提供了學習方法以及API文檔，爲咱們學習提供了很大的幫助，在學習以前能夠先看一下官網的在線演示效果，包括基礎演示和精彩移動端以及PC端的頁面展現，瞭解Swiper的精彩之處，下面經過一個京東主頁面的輪播來介紹Swiper（京東輪播圖屬於固定大小的輪播圖，比較簡單）app
1.準備工做框架
首先咱們須要下載swiper，官方網站提供，能夠下載完整的zip文件包，也能夠只下載這三個文件（jquery-1.11.3.min.js swiper.min.js swiper.min.css ）,新建文件夾js和css，將js文件放在js中，將css文件放在css中，同時去京東官網獲取輪播圖片，放在image文件夾下ide
2 新建html文件 函數
將下載的文件引入到頁面中，官網中介紹了，首先加載插件，須要用到的文件有swiper.min.js和swiper.min.css文件。可下載Swiper文件或使用CDNoop
<title>京東輪播</title> <link rel="stylesheet" href="css/swiper.min.css" > <script src="js/jquery-1.11.3.min.js"></script> <script src="js/swiper.min.js"></script>
3 HTML內容。學習
<div class="swiper-container myswiper"> //一個大容器裝載內容，高度是有內部的內容撐起 <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"> //由於京東的圖片是連接，圖片包裹在a中 <img src="image/1.jpg" alt=""> //能夠直接獲取圖片的網頁地址 </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/2.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/3.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/4.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/5.jpg" alt=""> </a> </div> </div> <!-- 若是須要分頁器 --> <div class="swiper-pagination"></div> //就是下面的小圓點 <!-- 若是須要導航按鈕 --> <div class="swiper-button-prev swiper-button-white butt"></div> //向左的箭頭 <div class="swiper-button-next"></div> //向右的箭頭 <!--若是須要滾動條 --> <!--<div class="swiper-scrollbar"></div>//此處不須要，京東輪播圖不須要 </div>-->
3 .給Swiper定義一個大小網站
由於京東圖片大小爲540*470，你能夠直接在swiper-container中定義大小，也能夠從新定義一個class來定義大小（此處我用myswiper）
*{ margin:0; padding:0; } .myswiper{ width:590px; height: 470px; }
4.初始化Swiper：最好是挨着</body>標籤（若是沒有緊挨着能夠在函數前加onload函數）
<script> var mySwiper = new Swiper ('.swiper-container', { // direction: 'vertical', //京東默認爲水平滑動，所以不須要，若是是垂直方向滑動，加上此屬性 loop: true,//此處表明環路，就是滑動到最後一張以後，又從新回到第一章圖片，造成一個環路 autoplay:1000, //表示自動輪播 // 若是須要分頁器 pagination: { el: '.swiper-pagination',//圖片切換至某頁，小圓點顏色改變 clickable: true, clickableClass : 'my-pagination-clickable',//後兩句表面鼠標點擊小圓點時，也能切換， }, // 若是須要前進後退按鈕 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },//前進和後退的按鈕，有不少樣式的按鈕，能夠改變大小和顏色 // 若是須要滾動條 // scrollbar: { // el: '.swiper-scrollbar', // }, }) </script>
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京東輪播</title>
<link rel="stylesheet" href="css/swiper.min.css" >
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/swiper.min.js"></script>
<style>
//須要更改那個屬性，就從新寫css樣式進行覆蓋
*{
margin:0;
padding:0;
}
.myswiper{
width:590px;
height: 470px;
border:1px solid red;
}
.swiper-button-next, .swiper-button-prev{
width:20px;
height: 21px;
}
.mySwiperBut{
background-image: none;
width:24px;
height: 40px;
background: rgba(0,0,0,.3);
text-align: center;
line-height: 40px;
color: hsla(0,0%,100%,.4);
font-size: 18px;
}//向前向後按鈕的共一樣式
.mySwiperBut:hover{
background: rgba(0,0,0,.6);
}
.swiper-pagination-bullet{
width: 7px;
height: 7px;
border:2px solid #fff;
transition: all .2s ease;
background: transparent;
z-index: 1000000;
}//分頁小圓點的樣式
.swiper-button-prev {
left: 0px;
}
.swiper-button-next {
right: 0px;
}
.swiper-pagination{
text-align: left;
margin-left: 46px;
bottom:20px;
}
.swiper-pagination-bullet-active{
background: #fff;
opacity: 1;
/*border:2px solid #b9beba;*/
/*transition: background .2s ease;*/
}
</style>
</head>
<body>
<div class="swiper-container myswiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="image/1.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="image/2.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="image/3.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="image/4.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="image/5.jpg" alt="">
</a>
</div>
</div>
<!-- 若是須要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 若是須要導航按鈕 -->
<div class="swiper-button-prev mySwiperBut"><</div>
<div class="swiper-button-next mySwiperBut">></div>
<!--若是須要滾動條 -->
<!--<div class="swiper-scrollbar"></div>
</div>-->
<script>
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',
loop: true,
autoplay:true,
// 若是須要分頁器
pagination: {
el: '.swiper-pagination',
clickable: true,
clickableClass : 'my-pagination-clickable',
},
// 若是須要前進後退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 若是須要滾動條
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
</script>
</body>
</html>