首页 > 代码库 > swiper使用案例一
swiper使用案例一
// 初始化函数 var mySwiper_a = new Swiper(‘.se3 .left‘, { direction: ‘vertical‘, loop: true, autoplay: 5000, // 回调函数,从一个slide过渡到另一个slide结束时执行 onSlideChangeEnd: function(swiper) { // 获取对应的index var num = swiper.activeIndex; // 给对应的标签添加样式 $(‘.se3 .right li‘).eq(num - 1).addClass(‘active‘).siblings().removeClass(‘active‘); } }); // 鼠标悬浮对应的标签切换 $(‘.se3 .right li‘).hover(function() { // 获取index $(this).addClass(‘active‘).siblings().removeClass(‘active‘); var num = $(this).index() + 1; // 双向控制中的函数 normalizeSlideIndex 不能为false,默认为true; mySwiper_a.slideTo(num, 1000, false); });
$mco:#996c33;
.se3{ .left{ width: 805px; height: 495px; float: left; } .right{ height: 495px; overflow:hidden; width: 565px; float: right; padding: 0; list-style: none; li{ width: 100%; height: 95px; margin-bottom: 5px; background: #dcdddd; padding-left: 65px; padding-top: 15px; a{ color: #333; width: 100%; } &.active{ background: $mco; a{ color: #fff; } } &:last-of-type{ line-height: 65px; font-weight: 700; } } } }
swiper使用案例一
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。