swiper实现tab切换效果例子

时间：7年前阅读：6020

直接上代码：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<link rel="stylesheet" type="text/css" href="uu/swiper-4.4.1.min.css"/>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#tab{    
				width: 600px;    
				height: 500px;    
				margin:50px auto;    
				border: 2px solid blue;    
				position: relative;    
			}    
			#tab ul li{    
				float: left;    
				width: 200px;    
				height: 50px;    
				text-align: center;    
				line-height: 50px;    
				font-size: 30px;    
				color: white;    
				list-style: none;    
			}    
			#tab .swiper-container{    
				position: absolute;    
				width: 600px;    
				height: 430px;    
				top: 70px;    
				left: 0;    
			}    
		</style>    
	</head>    
	<body>    
		<div id="tab">    
			<ul>    
				<li style="background: darkcyan;">新闻</li>    
				<li style="background: darkgoldenrod;">体育</li>    
				<li style="background: darkmagenta;">娱乐</li>    
			</ul>    
		<div class="swiper-container">    
<div class="swiper-wrapper">    
<div class="swiper-slide" style="background: darkcyan;">Slide 1</div>    
<div class="swiper-slide" style="background: darkgoldenrod;">Slide 2</div>    
<div class="swiper-slide" style="background: darkmagenta;">Slide 3</div>    
</div>    
</div>    
</div>    
		<script src="uu/swiper-4.4.1.min.js" type="text/javascript"></script>    
		<script src="uu/jquery-1.11.3.min.js.js" type="text/javascript"></script>    
		<script>            
var mySwiper = new Swiper ('.swiper-container', {    
direction: 'vertical',   // 垂直切换选项    
//   loop: true,   // 循环模式选项     下面发现那个mySwiper.slideTo(t, 1000, false)位置不正确，点第一个显示第二个    
//原因是loop 这个循环自动在前面多加一个，所以点第一个显示第二个，我们把这个关掉就正确了    
simulateTouch : false,  //禁止鼠标模拟    
//effect : 'fade',   //切换效果 淡入淡出    
effect : "cube",   //切换效果 : 3D效果    
})    
$('#tab ul li').click(function(){    
//	获得当前点击li的序号    
 	var t=$(this).index();    
 	mySwiper.slideTo(t, 1500, false);//切换到第一个slide，速度为1秒    
})    
</script>    
	</body>    
</html>

上面代码静态效果图片（动态效果直接复印代码自已去试）：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

swiper实现tab切换效果例子

网友评论