本代码意在实现一个带有时间轴的轮播图,时间轴可以跟随轮播图一起滚动。整体轮播图可以自动轮播亦可点击左右按钮进行手动切换,亦可用户误无操作5s后自动轮播。
代码如下
HTML代码
<div class="outside">
<div class="box">
<div class="box_top">
<div class="box_top_inner" id="big">
<div class="box_top_inner_item">
<div class="time">2023</div>
<div class="dotted"></div>
</div>
<div class="box_top_inner_item">
<div class="time">2022</div>
<div class="dotted"></div>
</div>
<div class="box_top_inner_item">
<div class="time">2021</div>
<div class="dotted"></div>
</div>
<div class="box_top_inner_item">
<div class="time">2020</div>
<div class="dotted"></div>
</div>
<div class="box_top_inner_item">
<div class="time">2019</div>
<div class="dotted"></div>
</div>
<div class="box_top_inner_item">
<div class="time">2018</div>
<div class="dotted"></div>
</div>
</div>
<div class="box_top_dotted"></div>
</div>
<div class="box_bottom">
<div class="box_bottom_inner" id="boxAll">
<div class="box_bottom_item">0</div>
<div class="box_bottom_item">1</div>
<div class="box_bottom_item">2</div>
<div class="box_bottom_item">3</div>
<div class="box_bottom_item">4</div>
<div class="box_bottom_item">5</div>
</div>
<div class="box_bottom_left" id="goLeft">
<img src="./images/pause.png" alt="" />
</div>
<div class="box_bottom_right" id="goRight">
<img src="./images/pause.png" alt="" />
</div>
</div>
</div>
</div>
css代码
* {
margin: 0;
padding: 0;
}
.outside {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 800px;
height: 500px;
border: 1px solid #ccc;
}
.box_top {
width: 100%;
height: 80px;
position: relative;
overflow: hidden;
}
.box_top_dotted {
width: 100%;
height: 1px;
border-bottom: 5px dotted #ffcc99;
position: absolute;
left: 0;
bottom: 2px;
}
.box_top_inner {
display: flex;
position: absolute;
top: 0;
left: 338px;
transition-duration: 1s;
transition-timing-function: linear;
}
.box_top_inner_item {
font-size: 30px;
width: 125px;
height: 80px;
position: relative;
}
.time {
width: 125px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 30px;
color: #ffcc99;
}
.dotted {
width: 10px;
height: 10px;
border-radius: 10px;
background-color: #ffcc99;
position: absolute;
bottom: 0px;
left: 57px;
}
.box_bottom {
width: 100%;
height: 420px;
background-color: #ccc;
position: relative;
}
.box_bottom {
width: 100%;
height: 420px;
overflow: hidden;
position: relative;
}
.box_bottom_inner {
transition: all 1s;
transition-timing-function: linear;
display: flex;
}
.box_bottom_item {
width: 800px !important;
height: 420px;
}
.box_bottom_item:nth-child(1) {
background-color: red;
}
.box_bottom_item:nth-child(2) {
background-color: orange;
}
.box_bottom_item:nth-child(3) {
background-color: yellow;
}
.box_bottom_item:nth-child(4) {
background-color: green;
}
.box_bottom_item:nth-child(5) {
background-color: blue;
}
.box_bottom_item:nth-child(6) {
background-color: rgb(55, 161, 64);
}
.box_bottom_left {
width: 60px;
height: 60px;
position: absolute;
left: 0px;
top: 190px;
}
.box_bottom_left img {
width: 60px;
height: 60px;
transform: rotateY(180deg);
}
.box_bottom_right {
width: 60px;
height: 60px;
position: absolute;
right: 0px;
top: 190px;
}
.box_bottom_right img {
width: 60px;
height: 60px;
}
js代码
<script>
var flag = 0;
var time = 5;
var bigInterval = null;
var animationTime = null;
function animation() {
clearInterval(animationTime);
animationTime = null;
document.getElementById("boxAll").style.width = `${800 * 6}px`;
bigInterval = setInterval(() => {
if (flag < 5) {
flag++;
document.getElementById("big").style.transform = `translateX(-${
125 * flag
}px)`;
document.getElementById("boxAll").style.transform = `translateX(-${
800 * flag
}px)`;
} else {
document.getElementById(
"big"
).style.transform = `translateX(${0}px)`;
flag = 0;
document.getElementById(
"boxAll"
).style.transform = `translateX(-${0}px)`;
}
var arrLength = document.getElementsByClassName("time").length;
for (var i = 0; i < arrLength; i++) {
document.getElementsByClassName("time")[i].style.fontSize = "25px";
}
setTimeout(() => {
document.getElementsByClassName("time")[flag].style.fontSize =
"40px";
}, 1000);
}, 2000);
}
animation();
document.getElementById("goRight").onclick = function () {
time = 5;
clearInterval(animationTime);
animationTime = null;
openAnimation();
clearInterval(bigInterval);
bigInterval = null;
flag++;
if (flag < 5) {
document.getElementById("big").style.transform = `translateX(-${
125 * flag
}px)`;
document.getElementById("boxAll").style.transform = `translateX(-${
800 * flag
}px)`;
} else {
document.getElementById("big").style.transform = `translateX(${0}px)`;
flag = 0;
document.getElementById(
"boxAll"
).style.transform = `translateX(-${0}px)`;
}
var arrLength = document.getElementsByClassName("time").length;
for (var i = 0; i < arrLength; i++) {
document.getElementsByClassName("time")[i].style.fontSize = "25px";
}
setTimeout(() => {
document.getElementsByClassName("time")[flag].style.fontSize = "40px";
}, 1000);
};
document.getElementById("goLeft").onclick = function () {
clearInterval(animationTime);
animationTime = null;
time = 5;
openAnimation();
clearInterval(bigInterval);
bigInterval = null;
var arrLength =
Number(document.getElementsByClassName("time").length) - 1;
flag--;
if (flag > -1) {
document.getElementById("big").style.transform = `translateX(-${
125 * flag
}px)`;
document.getElementById("boxAll").style.transform = `translateX(-${
800 * flag
}px)`;
} else {
document.getElementById("big").style.transform = `translateX(-${
arrLength * 125
}px)`;
flag = 5;
document.getElementById("boxAll").style.transform = `translateX(-${
arrLength * 800
}px)`;
}
for (var i = 0; i < arrLength; i++) {
document.getElementsByClassName("time")[i].style.fontSize = "25px";
}
setTimeout(() => {
document.getElementsByClassName("time")[flag].style.fontSize = "40px";
}, 1000);
};
//计时开启动画
function openAnimation() {
animationTime = setInterval(() => {
if (time > 0) {
time--;
} else {
animation();
}
}, 1000);
}
</script>
本代码由于使用纯原生写的,没有引入任何插件,所以本代码完全可以改动为公共组件进行使用,难度并不大。由于轮播图我使用的是背景颜色,以后需要更改为文字内容或者图片都可以的。需要注意的是左右按钮是个图片,需要读者自行寻找图片更换。