开始.png
到底.png
中间.png
（ 导航栏箭头可替换为图片更为美观 ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏点击箭头左右切换</title>
<style>
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
width: 96.58vw;
height: 4.42vw;
border: 1px solid #FEE5A7;
background: linear-gradient(0deg, #580600 0%, #D60A00 100%);
border-radius: 22px;
position: relative;
}
.nav_box {
width: 90.9%;
margin: 0 auto;
overflow: hidden;
height: 2.9vw;
margin-top: 0.65vw;
}
.nav_ul {
width: max-content;
height: 2.9vw;
margin: 0;
padding: 0;
display: inline-block;
}
.nav_ul li {
float: left;
color: #F5E7C0;
position: relative;
width: 11vw;
height: 100%;
text-align: center;
line-height: 2.9vw;
font-size: 1.61vw;
cursor: pointer;
font-family: "DreamHanSerifCN";
}
.nav_ul li::after {
position: absolute;
content: '';
right: 0;
top: 0;
width: 3px;
height: 2.9vw;
background: linear-gradient(0deg, rgba(230, 206, 153, 0) 0%, rgba(230, 206, 153, 0.98) 51%, rgba(237, 213, 163, 0) 100%);
border-radius: 2px;
}
.nav_ul li:last-child::after {
display: none;
}
.nav_ul li a {
width: 100%;
height: 100%;
display: inline-block;
color: #F5E7C0;
}
.arrow_left {
width: 0;
height: 0;
border-bottom: 0.8vw solid transparent;
border-top: 0.8vw solid transparent;
border-right: 1.2vw solid red;
cursor: pointer;
position: absolute;
top: 1.4vw;
left: 2vw;
}
.arrow_right {
width: 0;
height: 0;
border-bottom: 0.8vw solid transparent;
border-top: 0.8vw solid transparent;
border-left: 1.2vw solid red;
cursor: pointer;
position: absolute;
top: 1.4vw;
right: 2vw;
}
</style>
</head>
<body>
<div class="nav">
<div class="arrow_left" id="arrow_left" style="display: none;"></div>
<div class="arrow_right" id="arrow_right"></div>
<div class="nav_box">
<ul class="nav_ul">
<li>
<a href="####" target="_self">01test</a>
</li>
<li>
<a href="####" target="_self">02test</a>
</li>
<li>
<a href="####" target="_self">03test</a>
</li>
<li>
<a href="####" target="_self">04test</a>
</li>
<li>
<a href="####" target="_self">05test</a>
</li>
<li>
<a href="####" target="_self">06test</a>
</li>
<li>
<a href="####" target="_self">07test</a>
</li>
<li>
<a href="####" target="_self">08test</a>
</li>
<li>
<a href="####" target="_self">11超出</a>
</li>
<li>
<a href="####" target="_self">12超出</a>
</li>
<li>
<a href="####" target="_self">13超出</a>
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
// 导航栏点击箭头左右切换
var nav_box = $('.nav_box').width();
var nav_ul = $('.nav_ul').width();
var nav_li = $('.nav_ul li:first').width();
var roll = nav_ul - nav_box
var total = Math.floor(roll / nav_li);
// 箭头显隐
if (total === 0) {
$('#arrow_left').hide();
$('#arrow_right').hide();
} else {
$('#arrow_right').show();
}
// 箭头点击切换
var index = 0;
$('#arrow_right').click(function () {
index++;
if (index === total) {
$(this).hide()
}
if (index >= 1) {
$('#arrow_left').show();
}
$('.nav_ul').css("margin-left", '-' + nav_li * index + 'px');
})
$('#arrow_left').click(function () {
index--;
console.log(index)
if (index === 0) {
$(this).hide()
}
if (index >= 0) {
$('#arrow_right').show();
}
$('.nav_ul').css("margin-left", '-' + nav_li * index + 'px');
})
</script>
</body>
</html>
