Home Explore Help
Register Sign In
jal
/
WebTest
Watch 2
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

京东移动端首页轮播图-使用swiper插件

Cathy 4 years ago
parent
02b0260cf9
commit
dc7c0e909c
9 changed files with 87 additions and 2 deletions
Split View Show Diff Stats
  1. 25 1
      jd-mobile/css/index.css
  2. 12 0
      jd-mobile/css/swiper.min.css
  3. 19 1
      jd-mobile/index.html
  4. 18 0
      jd-mobile/js/index.js
  5. 13 0
      jd-mobile/js/swiper.min.js
  6. BIN
      jd-mobile/upload/banner.dpg
  7. BIN
      jd-mobile/upload/banner1.dpg
  8. BIN
      jd-mobile/upload/banner2.dpg
  9. BIN
      jd-mobile/upload/banner3.dpg

+ 25 - 1
jd-mobile/css/index.css
View File 

@@ -144,6 +144,30 @@ a {
 
 .slider img {
 
   width: 100%;
 
 }
 
+.swiper-container {
 
+  width: 100%;
 
+  height: 100%;
 
+
 
+}
 
+.swiper-slide {
 
+  text-align: center;
 
+  font-size: 18px;
 
+  background: #fff;
 
+
 
+  /* Center slide text vertically */
 
+  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;
 
+}
 
 .brand div{
 
   float: left;
 
   width: 33.33%;
 
@@ -188,4 +212,4 @@ nav a span {
 
 }
 
 .news img {
 
   width: 100%;
 
-}
 
+}

File diff suppressed because it is too large
+ 12 - 0
jd-mobile/css/swiper.min.css


+ 19 - 1
jd-mobile/index.html
View File 

@@ -9,6 +9,11 @@
 
   <link rel="stylesheet" href="css/normalize.css">
 
   <!-- 引入首页的CSS -->
 
   <link rel="stylesheet" href="css/index.css">
 
+  <!-- 引入swiper的css和js文件 -->
 
+  <link rel="stylesheet" href="css/swiper.min.css">
 
+  <script src="js/swiper.min.js"></script>
 
+  <!-- 引入我们自己的js文件 -->
 
+  <script src="js/index.js"></script>
 
 </head>
 
 <body>
 
   <!-- 顶部 -->
 
@@ -42,7 +47,20 @@
 
   <div class="main-content">
 
     <!-- 滑动图 -->
 
     <div class="slider">
 
-      <img src="upload/banner.dpg" alt="">
 
+       <!-- Swiper -->
 
+      <div class="swiper-container">
 
+        <div class="swiper-wrapper">
 
+          <div class="swiper-slide"><img src="upload/banner.dpg" alt=""></div>
 
+          <div class="swiper-slide"><img src="upload/banner1.dpg" alt=""></div>
 
+          <div class="swiper-slide"><img src="upload/banner2.dpg" alt=""></div>
 
+          <div class="swiper-slide"><img src="upload/banner3.dpg" alt=""></div>
 
+        </div>
 
+        <!-- Add Pagination -->
 
+        <div class="swiper-pagination"></div>
 
+        <!-- Add Arrows -->
 
+        <div class="swiper-button-next"></div>
 
+        <div class="swiper-button-prev"></div>
 
+      </div>
 
     </div>
 
   </div>
 
   <!-- 品牌日 -->

+ 18 - 0
jd-mobile/js/index.js
View File 

@@ -0,0 +1,18 @@
 
+window.addEventListener('load', function () {
 
+  var swiper = new Swiper('.swiper-container', {
 
+    spaceBetween: 30,
 
+    centeredSlides: true,
 
+    autoplay: {
 
+      delay: 2500,
 
+      disableOnInteraction: false,
 
+    },
 
+    pagination: {
 
+      el: '.swiper-pagination',
 
+      clickable: true,
 
+    },
 
+    navigation: {
 
+      nextEl: '.swiper-button-next',
 
+      prevEl: '.swiper-button-prev',
 
+    },
 
+  });
 
+})

File diff suppressed because it is too large
+ 13 - 0
jd-mobile/js/swiper.min.js


BIN
jd-mobile/upload/banner.dpg
View File


BIN
jd-mobile/upload/banner1.dpg
View File


BIN
jd-mobile/upload/banner2.dpg
View File


BIN
jd-mobile/upload/banner3.dpg
View File