版权声明：欢迎阅读，有误请指正，转载请申明。 https://blog.csdn.net/wx1995sss/article/details/87914130
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.tab-wrap {
width: 1000px;
height: 400px;
margin: 0 auto;
}
#tab-choose {
width: 100%;
height: 40px;
}
#tab-choose li {
float: left;
width: 20%;
height: 100%;
box-sizing: border-box;
border: 2px solid transparent;
border-bottom-color: green;
text-align: center;
line-height: 40px;
}
#tab-choose .choose {
border: 2px solid green;
border-bottom-color: transparent;
}
#tab-con {
width: 100%;
height: 360px;
box-sizing: border-box;
border: 2px solid green;
border-top: transparent;
}
#tab-con>div {
position: relative;
display: none;
overflow: hidden;
width: 100%;
height: 100%;
}
#tab-con .block {
display: block;
}
.carousel_ul {
position: absolute;
top: 0;
padding: 30px 30px;
box-sizing: border-box;
width: 1565px;
height: 360px;
white-space: nowrap;
}
.carousel_ul li {
width: 200px;
height: 300px;
display: inline-block;
margin-right: 15px;
}
.carousel_ul img {
width: 200px;
height: 300px;
}
.tab-left {
position: absolute;
top: 0;
bottom: 0;
left: 20px;
width: 24px;
height: 30px;
margin: auto;
background: red;
}
.tab-right {
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 24px;
height: 30px;
margin: auto;
background: red;
}
</style>
</head>
<body>
<div class="tab-wrap">
<ul id="tab-choose">
<li class="choose"><span>分类一</span></li>
<li><span>分类二</span></li>
<li><span>分类三</span></li>
<li><span>分类四</span></li>
<li><span>分类五</span></li>
</ul>
<div id="tab-con">
<div id="tab-list" class="block">
<ul class="carousel_ul" style="left:0px;">
<li>
<a href=""><img src="images/5.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/2.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/4.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/3.jpg" alt="" /></a>
</li>
</ul>
<button class="tab-left"></button>
<button class="tab-right"></button>
</div>
<div id="">
<ul class="carousel_ul" style="left:0px;">
<li>
<a href=""><img src="images/5.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/2.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/4.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/3.jpg" alt="" /></a>
</li>
</ul>
<button class="tab-left"></button>
<button class="tab-right"></button>
</div>
<div id="">
<ul class="carousel_ul" style="left:0px;">
<li>
<a href=""><img src="images/5.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/2.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/4.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/3.jpg" alt="" /></a>
</li>
</ul>
<button class="tab-left"></button>
<button class="tab-right"></button>
</div>
<div id="">
<ul class="carousel_ul" style="left:0px;">
<li>
<a href=""><img src="images/5.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/2.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/4.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/3.jpg" alt="" /></a>
</li>
</ul>
<button class="tab-left"></button>
<button class="tab-right"></button>
</div>
<div id="">
<ul class="carousel_ul" style="left:0px;">
<li>
<a href=""><img src="images/5.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/2.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/4.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="images/3.jpg" alt="" /></a>
</li>
</ul>
<button class="tab-left"></button>
<button class="tab-right"></button>
</div>
</div>
</div>
<script>
var choose_li = document.getElementById("tab-choose").getElementsByTagName("li");
var choose_con = document.getElementById("tab-con").getElementsByTagName("div");
for(var i = 0; i < choose_li.length; i++) {
choose_li[i].onmouseover = function() {
change(this);
}
}
function change(obj) {
for(var i = 0; i < choose_li.length; i++) {
if(choose_li[i] == obj) {
choose_li[i].className = "choose";
choose_con[i].className = "block";
choose_con[i].id = "tab-list";
var ul = document.getElementById("tab-list").getElementsByTagName("ul")[0];
var btns = document.getElementById("tab-list").getElementsByTagName("button");
btns[0].onclick = function() {
if(parseInt(ul.style.left) < 0) {
var pre = parseInt(ul.style.left) + 100;
ul.style.left = pre + "px";
}
}
btns[1].onclick = function() {
if(parseInt(ul.style.left) >= -465) {
var next = parseInt(ul.style.left) - 100;
ul.style.left = next + "px";
}
}
} else {
choose_li[i].className = "";
choose_con[i].className = "";
choose_con[i].id = "";
}
}
}
/*按钮转换模块，放在tab切换栏目中
var ul = document.getElementById("tab-list").getElementsByTagName("ul")[0];
var btns = document.getElementById("tab-list").getElementsByTagName("button");
btns[0].onclick = function(){
if(parseInt(ul.style.left) < 0){
var pre = parseInt(ul.style.left)+100;
ul.style.left = pre + "px";
}
}
btns[1].onclick = function(){
if(parseInt(ul.style.left) >= -465){
var next = parseInt(ul.style.left)-100;
ul.style.left= next + "px";
}
}*/
</script>
</body>
</html>