html+css+js圖片手動輪播

源代碼在界面圖片后面

輪播演示用的幾張圖片是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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/41019.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/41019.shtml
英文地址，請注明出處：http://en.pswp.cn/web/41019.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！