Swiper中文论坛

标题: 求助，点击图片滑动到指定slide [打印本页]
作者: gandli    时间: 2015-7-6 12:53
标题: 求助，点击图片滑动到指定slide
如何实现，点击某图片滑动到指定slide呢？
是用mySwiper.slideTo(index, speed, runCallbacks)吗？
作者: swiperbbs    时间: 2015-7-7 01:06
用这个 mySwiper.slideTo(index, speed, runCallbacks)
下标从0开始

eg:  mySwiper.slideTo(2)  换到第三个
作者: gandli    时间: 2015-7-9 21:08
swiperbbs 发表于 2015-7-7 01:06
用这个 mySwiper.slideTo(index, speed, runCallbacks)
下标从0开始

比如这个里在img怎么写呢？

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.      <meta charset="utf-8">
  5.          <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.         <!--[if lt IE 9]>
  7. 　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  8. 　　<![endif]-->
  9.     <!--meta name="viewport" content="width=320,minimum-scale=0.5, maximum-scale=5, user-scalable=no"-->
  10.     <title>办证微指南</title>
  11. <!--meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/-->
  12. <link rel="stylesheet" href="css/swiper.min.css">
  13. <link rel="stylesheet" href="css/animate.min.css">


  16. <!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
  17. <link rel="stylesheet" href="/dist/css/animate.min.css">
  18. <script src="/dist/js/swiper.min.js"></script>
  19. <script src="/dist/js/swiper.animate.min.js"></script>-->

  21. <style>
  22. *{
  23.         margin:0;
  24.         padding:0;
  25. }
  26. html,body{
  27.         height:100%;
  28. }
  29. body{
  30.         font-family:"microsoft yahei";
  31. }
  32. .swiper-container {
  33.   /*  width: 320px;
  34.     height: 480px;*/
  35.         width: 100%;
  36.     height: 100%;
  37.         background:#fff;

  39.   
  40. }  

  42. .swiper-slide{
  43.         width:100%;
  44.         height:100%;
  45.        
  46.         background-size:100% 100%;

  48. }
  49. img { max-width: 100%;}
  50. img{
  51.         display:block;
  52. }
  53. .swiper-pagination-bullet {
  54. width: 6px;
  55. height: 6px;
  56. background: #fff;
  57. opacity: .4;
  58. }
  59. .swiper-pagination-bullet-active {
  60. opacity: 1;
  61. }
  62. @-webkit-keyframes start {
  63.         0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
  64.         60% {opacity: 1;-webkit-transform: translate(0,0);}
  65.         100% {opacity: 0;-webkit-transform: translate(0,-8px);}
  66. }
  67. @-moz-keyframes start {
  68.         0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
  69.         60% {opacity: 1;-moz-transform: translate(0,0);}
  70.         100% {opacity: 0;-moz-transform: translate(0,-8px);}
  71. }
  72. @keyframes start {
  73.         0%,30% {opacity: 0;transform: translate(0,10px);}
  74.         60% {opacity: 1;transform: translate(0,0);}
  75.         100% {opacity: 0;transform: translate(0,-8px);}
  76. }
  77. .ani{
  78.         position:absolute;
  79.         }
  80. .txt{
  81.         position:absolute;
  82. }
  83. #array{
  84.         position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;
  85. }
  86. </style>
  87. </head>

  89. <body>
  90. <script src="js/swiper.min.js"></script>
  91. <script src="js/swiper.animate.min.js"></script>




  96. <div class="swiper-container">
  97.     <div class="swiper-wrapper">
  98.        
  99.     <!-------------slide1----------------->
  100.             <section class="swiper-slide swiper-slide1">
  101.         <img  src="upload/新证入网十日办结.png" class="ani resize" style="width:320px;height:43px;left:0px;top:30px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" mySwiper.slideTo(11) >
  102.         <img src="upload/长乐市烟草专卖局.jpg" class="ani resize" style="width:320px;height:27px;left:0px;top:75px;z-index:3;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"  >
  103.         <img src="upload/免费办证方便快捷.png" class="ani resize" style="width:320px;height:188px;left:0;top:140px;z-index:2;" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s"   >
  104.         <img src="upload/卷烟包装.png"  class="ani resize" style="width:320px;height:188px;left:0px;top:140px;z-index:1;" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2.5s"  >
  105.         <img src="upload/首先.png"  class="ani resize" style="width:320px;height:112px;left:0px;top:320px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="4s" >
  106.                 </section>

  108.      <!---------------slide2-------------->
  109.         <section class="swiper-slide swiper-slide2">
  110.         <img src="upload/您需要准备以下材料.png" class="ani resize" style="width:320px;height:43px;left:0px;top:10px;z-index:3; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s"  >
  111.                 <img src="upload/行政许可申请书1份（由管理所提供）.png" class="ani resize" style="width:320px;height:21px;left:10px;top:80px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  >
  112.                 <img src="upload/您的个人免冠肖像照片1张.png" class="ani resize" style="width:320px;height:21px;left:10px;top:122px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
  113.                 <img src="upload/您的居民身份证复印件1张.png" class="ani resize" style="width:320px;height:21px;left:10px;top:164px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"  >
  114.                 <img src="upload/店面的产权证明复印件1张.png" class="ani resize" style="width:320px;height:21px;left:10px;top:206px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s"  >
  115.                 <img src="upload/店面的租赁合同复印件1张.png" class="ani resize" style="width:320px;height:21px;left:10px;top:248px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2.5s"  >
  116.                 <img src="upload/工商营业执照复印件1张.png" class="ani resize" style="width:320px;height:21px;left:10px;top:290px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="3s"  >
  117.                 <img src="upload/资金证明复印件1张.png" class="ani resize" style="width:320px;height:21px;left:10px;top:332px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="3.5s"  >
  118.                 <img src="upload/委托授权书1份（由他人代办时）.png" class="ani resize" style="width:320px;height:21px;left:10px;top:374px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="4s"  >   
  119.         </section>
  120.      <!----------------slide3-------------->
  121.         <section class="swiper-slide swiper-slide3">
  122.         <img src="upload/行政许可申请书1份（由管理所提供）.png" class="ani resize" style="width:320px;height:21px;left:10px;top:10px;z-index:4; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s"  >
  123.                 <img src="upload/申请书.png" class="ani resize" style="width:320px;height:400px;left:10px;top:40px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  >
  124.         </section>
  125.         <!-------------slide4----------------->
  126.         <section class="swiper-slide swiper-slide4">
  127.                
  128.         <img src="upload/您的个人免冠肖像照片1张.png" class="ani resize" style="width:320px;height:21px;left:10px;top:10px;z-index:4; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s"  >
  129.                 <img src="upload/照片.png" class="ani resize" style="width:320px;height:400px;left:10px;top:40px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  >
  130.         </section>
  131.                 <!-------------slide5----------------->
  132.         <section class="swiper-slide swiper-slide4">
  133.         <img src="upload/您的居民身份证复印件1张.png" class="ani resize" style="width:320px;height:21px;left:10px;top:10px;z-index:4; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s"  >
  134.                 <img src="upload/身份证.png" class="ani resize" style="width:320px;height:400px;left:10px;top:40px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  >
  135.         </section>

  137.         
  138.     </div>
  139.    
  140.        
  141.    <img src="images/arrow1.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize">
  142.   <div class="swiper-pagination"></div>  
  143. </div>


  146. <script>  

  148. scaleW=window.innerWidth/320;
  149. scaleH=window.innerHeight/480;
  150. var resizes = document.querySelectorAll('.resize');
  151.           for (var j=0; j<resizes.length; j++) {
  152.            resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
  153.                    resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
  154.                    resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
  155.                    resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';
  156.           }
  157.                   
  158.   var mySwiper = new Swiper ('.swiper-container', {
  159.    direction : 'vertical',
  160.    loop : false,
  161.    pagination: '.swiper-pagination',
  162.    keyboardControl : true,

  164.   //virtualTranslate : true,
  165.    mousewheelControl : true,
  166.    onInit: function(swiper){
  167.    swiperAnimateCache(swiper);
  168.    swiperAnimate(swiper);
  169.           },
  170.    onSlideChangeEnd: function(swiper){
  171.         swiperAnimate(swiper);
  172.     },
  173.         onTransitionEnd: function(swiper){
  174.         swiperAnimate(swiper);
  175.     },
  176.        
  177.        
  178.         watchSlidesProgress: true,

  180.       onProgress: function(swiper){
  181.         for (var i = 0; i < swiper.slides.length; i++){
  182.           var slide = swiper.slides[i];
  183.           var progress = slide.progress;
  184.           var translate = progress*swiper.height/4;  
  185.                   scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
  186.           var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
  187.           slide.style.opacity = opacity;
  188.                   es = slide.style;
  189.                   es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';

  191.         }
  192.       },
  193.        
  194.            onSetTransition: function(swiper, speed) {
  195.         for (var i = 0; i < swiper.slides.length; i++){
  196.           es = swiper.slides[i].style;
  197.                   es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

  199.         }
  200.       },
  201.        
  202.        
  203.        
  204.            })
  205.              
  206.   </script>


  209. </body>
  210. </html>

复制代码


作者: MEME    时间: 2015-7-10 15:29
我也想知道，不知楼主有方法了没啊
作者: MEME    时间: 2015-7-10 15:32
楼主，mySwiper.slideTo(2) 这个挺好使的



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2