TA的每日心情 | 难过 2023-10-16 02:19 |
---|
签到天数: 13 天 [LV.3]偶尔看看II
注册会员
- 积分
- 65
|
前几天从网站看到tvrfqbmmm的大作animateControl,之所以特别关注这个插件是因为在大疆的网站首页看到了slider循环并且动画也可以循环的效果,最后从说明页下面看到Swiper默认是不支持loop以后的animate的,下载了tvrfqbmmm制作的这个插件,感觉效果很好,可是在使用中遇到了一些困扰,请各位达人指点,谢谢!
<script language="javascript">
// 在全局范围内创建主动画控制器与子动画控制器
var myAC_main1 = new animateControl("main1_ani_"); 这个是什么意思?myAC_main1和后面的main1_ani_是干什么用的?
var myAC_child1 = new animateControl("child1_ani_"); 这个和下面的又是什么意思?myAC_child1和child1_ani_干什么用的?
var myAC_child2 = new animateControl("child2_ani_");
// 在文档结构加载完成之后,载入swiper幻灯片,并初始化所有的动画控制器
$(document).ready(function(){
// 第 1 个子swiper幻灯片
var mySwiper_child1 = new Swiper('.swiper-container-child1',{ 第1个和第2个子swiper也看不懂和主swiper有什么关系,为什么要定义他们?
onInit: function(swiper){
myAC_child1.init(swiperAnimateParam_child1, swiper);
},
onSlideChangeEnd: function(swiper){
myAC_child1.play();
},
});
// 第 2 个子swiper幻灯片
var mySwiper_child2 = new Swiper('.swiper-container-child2',{ 第1个和第2个子swiper也看不懂和主swiper有什么关系,为什么要定义他们?
onInit: function(swiper){
myAC_child2.init(swiperAnimateParam_child2, swiper);
},
onSlideChangeEnd: function(swiper){
myAC_child2.play();
},
});
// 主swiper幻灯片
var mySwiper = new Swiper('.swiper-container-main1',{ 有这个主swiper不久够了吗?官方的如果不支持一个slider的子swiper,这个不久够了吗?
effect: 'fade', 这个参数懂的,是原插件自带的。
autoplay: 2500, 这个参数懂的,是原插件自带的。
nextButton: '.swiper-button-next', 这个参数懂的,是原插件自带的。
prevButton: '.swiper-button-prev', 这个参数懂的,是原插件自带的。
loop: true, 这个参数懂的,是原插件自带的。
pagination : '.swiper-pagination', 这个参数懂的,是原插件自带的。
onInit: function(swiper){
myAC_main1.init(swiperAnimateParam_main1, swiper); 这个是自定义的吗?干什么用的?
myAC_main1.addChild(2, myAC_child1); 这个是自定义的吗?干什么用的?
},
onSlideChangeEnd: function(swiper){ 这个参数懂的,是原插件自带的。
myAC_main1.play(); 这个是自定义的吗?干什么用的?
},
});
});
</script>
当时tvrfqbmmm为了演示不同发现的内嵌swiper,建立了好几个子slide(child),我现在不需要子slide,只需要几张图片循环,外加像大疆那样的标题(animate)可以在slides循环后可以播放,上面的JavaScript应该怎么写。
谢谢!
|
|