视频效果
导航滚动条
html代码如下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<style>
body {
background-color: #f1f1f1;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
display: none;
}
#listDiv {
width: 100%;
overflow-x: scroll;
background-color: #ffffff;
}
#listDiv ul {
display: flex;
white-space: nowrap;
padding-left: 20px;
}
#listDiv ul li {
padding: 5px 15px 5px 15px;
background-color: #ededed;
margin-right: 10px;
display: flex;
justify-content: center;
border-radius: 25px;
}
.prev,
.next {
position: fixed;
top: 20px;
}
.prev {
left: 0px;
display: none;
}
.next {
right: 0px;
}
</style>
</head>
<body>
<svg t="1698737430930" class="prev" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="9839" width="26" height="26">
<path
d="M378.630968 512.004093 705.390034 177.12714c11.038404-11.33107 11.038404-29.692253 0-41.021276-11.07729-11.32186-28.988218-11.32186-40.027645 0L318.636572 491.503177c-11.07729 11.32186-11.07729 29.68202 0 41.002856L665.362388 887.895159c11.039427 11.320836 28.950356 11.320836 40.027645 0 11.038404-11.320836 11.038404-29.68202 0-41.013089L378.630968 512.004093z"
fill="#8a8a8a" p-id="9840"></path>
</svg>
<svg t="1698728822266" class="next" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2867" width="26" height="26">
<path
d="M711.6 488.624L355.2 152.976a29.36 29.36 0 0 0-42.352 0 31.408 31.408 0 0 0 0 43.552L647.76 512 312.848 827.36a31.408 31.408 0 0 0 0 43.552 29.36 29.36 0 0 0 42.352 0l356.4-335.648a36.32 36.32 0 0 0 0-46.64z"
fill="#8a8a8a" p-id="2868" data-spm-anchor-id="a313x.search_index.0.i2.41143a816djp7O" class="selected">
</path>
</svg>
<div id="listDiv">
<ul id="list">
<li class="item">李白</li>
<li class="item">杜甫</li>
<li class="item">杜牧</li>
<li class="item">王安石</li>
<li class="item">无承诺</li>
<li class="item">曹雪芹</li>
</ul>
</div>
</body>
<script>
$(document).ready(function () {
var container = $("#listDiv");
var leftIcon = document.querySelector('#listDiv');
var totalWidth = $("#list").outerWidth(true);
var prevIcon = document.getElementsByClassName("prev")[0];
var nextIcon = document.getElementsByClassName("next")[0];
$(".prev").click(function () {
container.animate({ scrollLeft: "-=" + totalWidth }, "slow");
});
$(".next").click(function () {
container.animate({ scrollLeft: "+=" + totalWidth }, "slow");
});
$("#listDiv").scroll(function () {
let left = Math.trunc(leftIcon.scrollLeft);
if (left == 0) {
prevIcon.style.display = 'none';
}
if (left > 0) {
prevIcon.style.display = 'block';
}
if (left < leftIcon.scrollWidth - totalWidth) {
nextIcon.style.display = 'block';
}
if (left == leftIcon.scrollWidth - totalWidth) {
nextIcon.style.display = 'none';
}
});
})
</script>
</html>