swiper官网:https://www.swiper.com.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<title>swiper选项卡</title>
</head>
<style>
.main {
width: 1000px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border: 2px solid #4390EE;
}
.tab-wrap {
height: 50px;
width: 100%;
background-color: #4390EE;
}
.swiper-container {
height: 100%;
}
.nav {
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
color: #fff;
cursor: pointer;
}
.active {
color: #FF4500;
}
.tab-cont {
width: 100%;
height: 450px;
position: relative;
}
.poster {
width: 100%;
height: 100%;
position: absolute;
}
.poster img {
width: 100%;
height: 100%;
}
.hidd {
display: none;
}
</style>
<body>
<div class="main">
<div class="tab-wrap">
<div class="swiper-container" id="swiper">
<div class="swiper-wrapper nav-wrap">
<!-- 导航由数据渲染 -->
</div>
</div>
</div>
<div class="tab-cont">
<!-- <div class="poster">
<img src="./img/img1.jpeg" alt="">
</div> -->
<!-- 方式一:内容由数据渲染 -->
<!-- 方式二:通过控制元素的显示隐藏来切换 -->
<!-- <div class="poster hidd" style="display: block;">
<img src="./img/img1.jpg" alt="">
</div>
<div class="poster hidd">
<img src="./img/img2.jpg" alt="">
</div>
<div class="poster hidd">
<img src="./img/img3.jpg" alt="">
</div>
<div class="poster hidd">
<img src="./img/img4.jpg" alt="">
</div>
<div class="poster hidd">
<img src="./img/img5.jpg" alt="">
</div>
<div class="poster hidd">
<img src="./img/img6.jpg" alt="">
</div> -->
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
<script>
(function (_this) {
// 菜单模拟数据
let nav_Data = ['全部', "分类一", '分类二', '分类三', '分类四', '分类五']
// 选项卡菜单渲染(在轮播注册前面)
$(_this).on('load', function () { nav_menu(nav_Data) })
function nav_menu(data) {
let tab_html = ''
data.forEach((item, index) => {
tab_html += `<div class="swiper-slide nav" data-id='${index}'>${item}</div>`
});
$('.nav-wrap').append(tab_html);
$('.nav-wrap').children(':eq(0)').addClass('active')//默认给第一个是激活状态
}
// 选项卡轮播注册(在菜单渲染之后)
$(function () {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',//切换方式,水平切换
loop: false,//是否无缝循环
freeMode: true, // slide 是否贴合侧边
slidesPerView: 5,//可视区域默认显示的个数
freeModeSticky: false,//使得freeMode也能自动贴合
roundLengths: true, //防止文字模糊
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
initialSlide: 0,//默认从下标为0的开始显示
});
})
//方式一:通过传入数据进行渲染
// 方式一模拟数据
let objData = [
{
img: './img/img1.jpg'
},
{
img: './img/img2.jpg'
},
{
img: './img/img3.jpg'
},
{
img: './img/img4.jpg'
},
{
img: './img/img5.jpg'
},
{
img: './img/img6.jpg'
},
];
$('.nav-wrap').on('click', '.nav', tab)
function tab(event) {
let tar = event.currentTarget//获取当前点击的元素
$(tar).addClass('active').siblings().removeClass('active')//点击到那个元素赋予它激活状态,并清除它兄弟的状态
let id = parseInt($(tar).attr('data-id'))//获取nav的data-id并由字符串转为数字
switch (id) {//当点击导航时根据id传入相应的参数
case 0:
tab_cont(objData[0])
break
case 1:
tab_cont(objData[1])
break
case 2:
tab_cont(objData[2])
break
case 3:
tab_cont(objData[3])
break
case 4:
tab_cont(objData[4])
break
case 5:
tab_cont(objData[5])
break
}
};
$(_this).on('load', function () { tab_cont(objData[0]) })//加载完成后传入默认显示的数据进行显示
function tab_cont(data) {
// console.log(data);
tab_cont_html = `
<div class="poster">
<img src="${data.img}" alt="">
</div> `
$('.tab-cont').html(tab_cont_html)
}
// 方式二:通过控制内容显示隐藏实现切换
// $('.nav-wrap').on('click', '.nav', tab)
// function tab(event) {
// let tar = event.currentTarget//获取当前点击的元素
// $(tar).addClass('active').siblings().removeClass('active')//点击到那个元素赋予它激活状态,并清除它兄弟的状态
// let id = parseInt($(tar).attr('data-id'))//获取nav的data-id并由字符串转为数字
// $('.tab-cont').children().hide()//先隐藏全部内容
// $('.tab-cont').children(':eq(' + id + ')').show()//显示当前活动的内容
// }
})(window)
</script>
</body>
</html>