使用前端代码,写个轮播图
时间: 2024-05-31 12:07:37 浏览: 7
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style type="text/css">
.container{
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.img-box{
position: absolute;
top: 0;
left: 0;
width: 3000px;
height: 400px;
}
.img-box img{
float: left;
width: 600px;
height: 400px;
}
.btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 50px;
background-color: rgba(0,0,0,0.3);
color: #fff;
text-align: center;
line-height: 50px;
font-size: 24px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
.btn:hover{
opacity: 1;
}
.prev{
left: 0;
}
.next{
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="img-box">
<img src="https://picsum.photos/id/1018/600/400">
<img src="https://picsum.photos/id/1020/600/400">
<img src="https://picsum.photos/id/1021/600/400">
<img src="https://picsum.photos/id/1022/600/400">
<img src="https://picsum.photos/id/1023/600/400">
</div>
<div class="btn prev"><</div>
<div class="btn next">></div>
</div>
<script type="text/javascript">
var container = document.querySelector('.container');
var imgBox = document.querySelector('.img-box');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
var imgArr = document.querySelectorAll('.img-box img');
var index = 0;
prevBtn.addEventListener('click', function(){
index--;
if(index < 0){
index = imgArr.length - 1;
}
imgBox.style.transform = 'translateX(' + (-index * 600) + 'px)';
});
nextBtn.addEventListener('click', function(){
index++;
if(index >= imgArr.length){
index = 0;
}
imgBox.style.transform = 'translateX(' + (-index * 600) + 'px)';
});
setInterval(function(){
index++;
if(index >= imgArr.length){
index = 0;
}
imgBox.style.transform = 'translateX(' + (-index * 600) + 'px)';
}, 3000);
</script>
</body>
</html>