根据以下需求图利用网页布局之定位完成淘宝官网轮播图部分
啥时候啥时候手机三脚架手机十几集手机手机点击就是计算机就是计算机十几集是
保存代码为html，替换图片路径即可，请采纳
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
/* 轮播容器 */
.carousel {
position: relative;
width: 520px;
height: 280px;
overflow: hidden;
}
/* 图片容器 */
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: none;
}
/* 圆点容器 */
.carousel .dots {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
}
/* 圆点 */
.carousel .dot {
width: 16px;
height: 16px;
margin: 0 8px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
/* 当前圆点 */
.carousel .active {
background-color: #333;
}
/* 左右箭头容器 */
.carousel .arrows {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
display: none;
cursor: pointer;
z-index: 1;
}
/* 左箭头 */
.carousel .arrows.prev {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
padding: 8px;
box-sizing: border-box;
}
.carousel .arrows.prev:before {
content: '<';
display: block;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 右箭头 */
.carousel .arrows.next {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
padding: 8px;
box-sizing: border-box;
}
.carousel .arrows.next:before {
content: '>';
display: block;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="carousel">
<!-- 图片容器 -->
<div class="images">
<img src="../images/01.jpg">
<img src="../images/02.jpg">
<img src="../images/03.jpg">
<img src="../images/04.jpg">
<img src="../images/05.jpg">
</div>
<!-- 圆点容器 -->
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- 左箭头 -->
<div class="arrows prev">
<div></div>
</div>
<!-- 右箭头 -->
<div class="arrows next">
<div></div>
</div>
</div>
<script>
// 获取轮播容器和圆点容器
var carousel = document.querySelector('.carousel');
var dots = carousel.querySelector('.dots');
var arrows = carousel.querySelectorAll('.arrows');
// 获取所有图片和圆点
var images = carousel.querySelectorAll('.images img');
var dotList = carousel.querySelectorAll('.dots .dot');
// 记录当前图片的下标
var currentIndex = 0;
// 自动播放
var timer = setInterval(function() {
// 切换到下一张图片
playNext();
}, 2000);
// 圆点点击事件
dots.onclick = function(e) {
if (e.target.classList.contains('dot')) {
// 获取点击的圆点的下标
var index = Array.prototype.indexOf.call(dotList, e.target);
// 切换到对应的图片
switchTo(index);
}
};
// 箭头点击事件
arrows.forEach(function(arrow) {
arrow.onclick = function() {
if (arrow.classList.contains('prev')) {
// 切换到上一张图片
playPrev();
} else if (arrow.classList.contains('next')) {
// 切换到下一张图片
playNext();
}
};
});
// 切换到上一张图片
function playPrev() {
// 获取上一张图片的下标
var prevIndex = (currentIndex - 1 + images.length) % images.length;
// 切换到上一张图片
switchTo(prevIndex);
}
// 切换到下一张图片
function playNext() {
// 获取下一张图片的下标
var nextIndex = (currentIndex + 1) % images.length;
// 切换到下一张图片
switchTo(nextIndex);
}
// 切换到指定下标的图片
function switchTo(index) {
// 如果下标相同，不进行任何操作
if (index === currentIndex) {
return;
}
// 隐藏当前显示的图片
images[currentIndex].style.display = 'none';
dotList[currentIndex].classList.remove('active');
// 显示指定下标的图片
images[index].style.display = 'block';
dotList[index].classList.add('active');
// 更新当前图片的下标
currentIndex = index;
// 根据当前图片是否为首尾图片，显示或隐藏左右箭头
if (currentIndex === 0) {
arrows[0].style.display = 'none';
arrows[1].style.display = 'block';
} else if (currentIndex === images.length - 1) {
arrows[0].style.display = 'block';
arrows[1].style.display = 'none';
} else {
arrows[0].style.display = 'block';
arrows[1].style.display = 'block';
}
}
</script>
</body>
</html>