求助，点击图片滑动到指定slide

gandli · 发表于 2015-7-6 12:53:54

如何实现，点击某图片滑动到指定slide呢？
是用mySwiper.slideTo(index, speed, runCallbacks)吗？

swiperbbs · 发表于 2015-7-7 01:06:52

用这个 mySwiper.slideTo(index, speed, runCallbacks)
下标从0开始

eg: mySwiper.slideTo(2) 换到第三个

gandli · 发表于 2015-7-9 21:08:02

swiperbbs 发表于 2015-7-7 01:06
用这个 mySwiper.slideTo(index, speed, runCallbacks)
下标从0开始

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->
<title>办证微指南</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
font-family:"microsoft yahei";
}
.swiper-container {
/* width: 320px;
height: 480px;*/
width: 100%;
height: 100%;
background:#fff;
}
.swiper-slide{
width:100%;
height:100%;
background-size:100% 100%;
}
img { max-width: 100%;}
img{
display:block;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes start {
0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
60% {opacity: 1;-webkit-transform: translate(0,0);}
100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
60% {opacity: 1;-moz-transform: translate(0,0);}
100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
0%,30% {opacity: 0;transform: translate(0,10px);}
60% {opacity: 1;transform: translate(0,0);}
100% {opacity: 0;transform: translate(0,-8px);}
}
.ani{
position:absolute;
}
.txt{
position:absolute;
}
#array{
position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;
}
</style>
</head>
<body>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="swiper-slide swiper-slide1">
<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) >
<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" >
<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" >
<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" >
<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" >
</section>
<section class="swiper-slide swiper-slide2">
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
</section>
<section class="swiper-slide swiper-slide3">
<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" >
<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" >
</section>
<section class="swiper-slide swiper-slide4">
<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" >
<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" >
</section>
<section class="swiper-slide swiper-slide4">
<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" >
<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" >
</section>
</div>
<img src="images/arrow1.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize">
<div class="swiper-pagination"></div>
</div>
<script>
scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
for (var j=0; j<resizes.length; j++) {
resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';
}
var mySwiper = new Swiper ('.swiper-container', {
direction : 'vertical',
loop : false,
pagination: '.swiper-pagination',
keyboardControl : true,
//virtualTranslate : true,
mousewheelControl : true,
onInit: function(swiper){
swiperAnimateCache(swiper);
swiperAnimate(swiper);
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper);
},
onTransitionEnd: function(swiper){
swiperAnimate(swiper);
},
watchSlidesProgress: true,
onProgress: function(swiper){
for (var i = 0; i < swiper.slides.length; i++){
var slide = swiper.slides[i];
var progress = slide.progress;
var translate = progress*swiper.height/4;
scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
slide.style.opacity = opacity;
es = slide.style;
es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';
}
},
onSetTransition: function(swiper, speed) {
for (var i = 0; i < swiper.slides.length; i++){
es = swiper.slides[i].style;
es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
}
},
})
</script>
</body>
</html>

复制代码

MEME · 发表于 2015-7-10 15:29:59

我也想知道，不知楼主有方法了没啊

MEME · 发表于 2015-7-10 15:32:48

楼主，mySwiper.slideTo(2) 这个挺好使的

求助，点击图片滑动到指定slide

点评

评分