swiper触屏滑动选项卡tab标签切换特效

来源:https://www.sucaihuo.com/js/2116.html 2017-06-06 17:34浏览(5365) 收藏

swiper触屏滑动选项卡tab标签切换特效,html5 swiper.js自定义实现手机移动端选项卡切换效果。
swiper触屏滑动选项卡tab标签切换特效
查看演示 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/swiper/idangerous.swiper.min.js"></script>
		<script type="text/javascript">
			$(function() {
	
		var tabsSwiper;
		tabsSwiper = new Swiper('.swiper-container', {
			speed : 500,
			onSlideChangeStart : function() {
				$(".tabs .active").removeClass('active');
				$(".tabs span").eq(tabsSwiper.activeIndex).addClass('active');
			}
		});
	
		$(".tabs span").on('touchstart mousedown', function(e) {
			e.preventDefault()
			$(".tabs .active").removeClass('active');
			$(this).addClass('active');
			tabsSwiper.swipeTo($(this).index());
	
		});
	
		$(".tabs span").click(function(e) {
			e.preventDefault();
		});
	
	
	});//end
		</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2