st

dist/index.js

@@ -224,11 +224,12 @@ window.onload = function () {
       })
       .then(function (response) {
         var res = response.data, data = null, html = '', imgList = [], swiperStr = '', pointStr = '', len = 0;
-        var swiper = document.querySelector('.swiper-wrapper .swiper-item'),
+        var swiper = document.querySelector('.swiper-container .swiper-wrapper'),
               point = document.querySelector('.swiper-wrapper .swiper-point'),
               detailsWrapper = document.querySelector('.details-wrapper'),
               copy_2 = document.getElementById("copy_2"),
-              copy_1 = document.getElementById("copy_1")
+              copy_1 = document.getElementById("copy_1"),
+              toast = document.getElementById("toast")
               ;
         console.log(swiper);
         if (res.errno == 0) {
@@ -237,14 +238,8 @@ window.onload = function () {
             len = imgList.length;
             if (len > 0) {
                 for (var i = 0; i < len; i++) {
-                    swiperStr += '<li><a href="javascript: ;"><img src="'+ imgList[i] +'"></a></li>';
-                    if (i === 0) {
-                        pointStr += '<li  class="now"></li>';
-                    }else{
-                        pointStr += '<li></li>';
-                    }
+                    swiperStr += '<div class="swiper-slide"><img src="'+ imgList[i] +'"></div>';
                 }
-                 swiperStr += '<li><a href="javascript: ;"><img src="'+ imgList[0] +'"></a></li>';
             }
             if (is_coupon == 1) {
                 html = '<h5 class="price"><span>券后 ¥</span><em>'+ data.discount_price +'</em><span class="icon icon-price">券&nbsp;&nbsp; '+ data.coupon_price
@@ -256,8 +251,12 @@ window.onload = function () {
 
             detailsWrapper.innerHTML = html;
             swiper.innerHTML = swiperStr;
-            point.innerHTML = pointStr;
-            startSwiper(len);
+
+            var mySwiper = new Swiper ('.swiper-container', {
+                autoplay: 3000,
+               loop: true,
+               pagination: '.swiper-pagination',
+             })
         }
       })
       .catch(function (error) {
@@ -277,8 +276,12 @@ window.onload = function () {
                 console.log(copy_1);
                 copy_1.value = data;
                 btn.addEventListener('click', function () {
-                  console.log('test');
-                      toCopy();
+                    // console.log('test');
+                    toCopy();
+                    toast.classList.add('show');
+                    setTimeout(function () {
+                        toast.classList.remove('show').add('hide');
+                    }, 2000)
                 }, false)
             }
         })

index.css

@@ -105,7 +105,8 @@ a{
 .download-wrapper .content,
 .download-wrapper button{
 } */
-.swiper-wrapper{
+
+.swiper-container{
     width: 7.5rem;
     height: 7.5rem;
     /*background-color: #f5f5f5;*/
@@ -113,30 +114,16 @@ a{
     overflow: hidden;
     position: relative;
 }
-.swiper-wrapper .swiper-item{
-    width: 1000%;
-    /*-webkit-transform: translateX(-10%);*/
-    /*transform: translateX(-10%);*/
-}
-.swiper-wrapper .swiper-item li{
-    width: 10%;
-    float: left;
-}
-.swiper-wrapper .swiper-item li a{
-    display: block;
-    width: 100%;
-}
-.swiper-wrapper .swiper-item li a img{
-    display: block;
+.swiper-wrapper{
     width: 100%;
+    height: 100%;
 }
-.swiper-wrapper .swiper-point{
-    position: absolute;
-    bottom: 6px;
+.swiper-slide img{
     width: 100%;
-    text-align: center;
+    height: 100%;
 }
-.swiper-wrapper .swiper-point li{
+
+.swiper-pagination-bullet{
     width: 3px;
     height: 3px;
     border-radius: 50%;
@@ -144,10 +131,7 @@ a{
     margin-left: 10px;
     background: #CFCFCF;
 }
-.swiper-wrapper .swiper-point li:first-child{
-    margin-left: 0;
-}
-.swiper-wrapper .swiper-point li.now{
+.swiper-pagination-bullet.swiper-pagination-bullet-active{
     width: 8px;
     background: #fff;
     border-radius: 0;
@@ -159,6 +143,7 @@ a{
     flex-direction: column;
     width: 100%;
     padding: 0 0.2rem;
+    margin-bottom: 50px;
 }
 .details-wrapper .price{
     margin-top: 16px;
@@ -239,4 +224,46 @@ span.icon.icon-price{
 }*/
 
 
+.weui-mask_transparent {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}
+.weui-toast {
+    position: fixed;
+    z-index: 5000;
+    width: 7.6em;
+    min-height: 7.6em;
+    top: 180px;
+    left: 50%;
+    margin-left: -3.8em;
+    background: rgba(17, 17, 17, 0.7);
+    text-align: center;
+    border-radius: 5px;
+    color: #FFFFFF;
 
+}
+.hide{
+    display: none;
+    opacity: 0;
+}
+.show{
+    display: block;
+    opacity: 1;
+}
+.weui-icon-success-no-circle {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 22px 0 0;
+    width: 39px;
+    height: 30px;
+    background: url(img/getIt.png) no-repeat 0 0;
+    -webkit-background-size: 39px 30px;
+    background-size: 39px 30px;
+}
+.weui-toast__content {
+    margin: 6px 0 15px;
+}

index.html

@@ -29,6 +29,7 @@
                 document.write('<style>body{min-width:320px;min-height:320px;}</style>');
               }
         </script>
+        <link rel="stylesheet" type="text/css" href="dist/swiper-3.4.2.min.css">
         <link rel="stylesheet" type="text/css" href="index.css">
         <style type="text/css" media="screen">
         </style>
@@ -42,9 +43,11 @@
             </div>
             <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon">下载APP</a>
         </div>
-        <div class="swiper-wrapper">
-              <ul class="clearfix swiper-item"></ul>
-              <ul class="swiper-point"></ul>
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
+            </div>
+            <!-- 如果需要分页器 -->
+            <div class="swiper-pagination"></div>
         </div>
         <div class="details-wrapper"></div>
         <div class="btn-wrapper">
@@ -52,6 +55,13 @@
             <div id="copy_2"></div>
             <button class="btn">点击复制淘口令，打开淘宝去购买</button>
         </div>
+        <div id="toast" class="hide">
+            <div class="weui-mask_transparent"></div>
+            <div class="weui-toast">
+                <i class="weui-icon-success-no-circle"></i>
+                <p class="weui-toast__content">已完成</p>
+            </div>
+        </div>
         <script src="dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="dist/swiper.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="dist/index.js" type="text/javascript" charset="utf-8"></script>