老师为什么在电脑端能实现手机端点不了

来源：2-4 编程练习

小丁同学ddd

2020-04-12 15:23:14

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
       <link rel="stylesheet" type="text/css" href="js/swiper/idangerous.swiper2.7.6.css" />
       <style>
           *{
           padding:0;
           margin:0;
           }
           html,body,
           .swiper-slider,
           .swiper-wrapper,
           .swiper-container{
           width:100%;
           height:100%;
           }
           img{
           width:100%;
           height:100%;
           }
       </style>
   </head>
   <body>
       <div class="swiper-container">
           <div class="swiper-wrapper">
               <div class="swiper-slide red">
                   <img src="http://climg.mukewang.com/59f2f3c60001e51206000600.jpg" />
               </div>
               <div class="swiper-slide green">
                   <img src="http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg" />
               </div>
               <div class="swiper-slide blue">
                   <img src="http://climg.mukewang.com/59f2f3fb0001725305000707.jpg" />
               </div>
           </div>
       </div>
       <script src="js/jquery-1.10.1.min.js"></script>
       <script type="text/javascript" src="js/swiper/idangerous.swiper2.7.6.min.js" ></script>
       <script src="js/swiper/idangerous.swiper.progress.min.js"></script>
       <script>
       var mySwiper = new Swiper('.swiper-container',{
          progress:true,
          onProgressChange: function(swiper){
            for (var i = 0; i < swiper.slides.length; i++){
              var slide = swiper.slides[i];
              var progress = slide.progress;
              var translate, boxShadow;
              if (progress>0) {
                translate = progress*swiper.width;
                boxShadowOpacity = 0;
              }
              else {
                translate=0;
                boxShadowOpacity = 1 - Math.min(Math.abs(progress),1);
              }
              slide.style.boxShadow='0px 0px 10px rgba(0,0,0,'+boxShadowOpacity+')';
              swiper.setTransform(slide,'translate3d('+(translate)+'px,0,0)');
            }
          },
          onTouchStart:function(swiper){
            for (var i = 0; i < swiper.slides.length; i++){
              swiper.setTransition(swiper.slides[i], 0);
            }
          },
          onSetWrapperTransition: function(swiper, speed) {
            for (var i = 0; i < swiper.slides.length; i++){
              swiper.setTransition(swiper.slides[i], speed);
            }
          }
        })
        // Set Z-Indexes
        for (var i = 0; i < mySwiper.slides.length; i++){
          mySwiper.slides[i].style.zIndex = i;
        }

       </script>
   </body>
</html>