swiper导航菜单轮播图切换特效动画插件

swiper导航菜单轮播图切换特效动画插件

高端炫酷大气仿阿里云首页导航菜单轮播图切换js特效动画效果代码下载。轮播图支持自动切换,鼠标经过分类弹出层下拉显示更多子菜单,动画效果非常炫酷,高仿阿里云导航菜单。

CSS样式代码
在页面引入相关CSS样式文件

1
2
3
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

swiper代码
常用于移动端网站的内容触摸滑动

1
2
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>

每个slide切换结束时运行当前slide动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    effect: 'fade',
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    autoplay: {
        delay: 5000, //1秒切换一次
    },
    on: {
        init: function() {
            swiperAnimateCache(this); //隐藏动画元素
            this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件
        },
        slideChangeTransitionEnd: function() {
            swiperAnimate(this); //每个slide切换结束时运行当前slide动画
        }
    }
});
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论