直接上代码：
<!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/post/7677.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知