html+css+js图片手动轮播

最新推荐文章于 2024-07-25 11:52:08 发布

睿智的海鸥

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量930

点赞数 23

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140237236

版权

源代码在界面图片后面

轮播演示用的几张图片是Bing上的，直接用的几张图片的URL，谁加载可能需要等一下，现实中替换成自己的图片即可

关注一下点个赞吧😄 谢谢大佬

界面图片

源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播示例</title>
<style>
body {
background-color: #f0f0f0; /* 浅灰色背景 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.carousel-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
padding: 20px;
text-align: center;
width: 80%; /* 居中的白色板块 */
max-width: 600px;
}

.carousel-image {
max-width: 100%;
height: auto;
}

.carousel-control {
background-color: white;
border: none;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
cursor: pointer;
font-size: 24px;
padding: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}

.carousel-control:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.left-control {
left: 10px;
}

.right-control {
right: 10px;
}
</style>
</head>
<body>
<div class="carousel-container">
<button class="carousel-control left-control" οnclick="changeImage(-1)"><</button>
<img id="carousel-image" class="carousel-image" src="" alt="轮播图片">
<button class="carousel-control right-control" οnclick="changeImage(1)">></button>
</div>

let currentIndex = 1; // 开始显示第二张图片

document.getElementById('carousel-image').src = images[currentIndex];

function changeImage(direction) {
currentIndex += direction;

if (currentIndex >= images.length) {
alert("这是最后一张图片！");
currentIndex = images.length - 1;
} else if (currentIndex < 0) {
alert("这是第一张图片！");
currentIndex = 0;
}

document.getElementById('carousel-image').src = images[currentIndex];
}
</script>
</body>
</html>