这是一个使用HTML、CSS和JavaScript创建半圆形旋转木马菜单的示例:
HTML代码:
CSS代码(style.css):
.carousel {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
.carousel-inner {
position: absolute;
width: 100%;
height: 100%;
}
.carousel-inner .item {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s;
}
.carousel-inner .item.active {
opacity: 1;
}
.carousel-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.carousel-controls button {
padding: 10px 20px;
margin: 0 5px;
}
.carousel-controls button.prev {
float: left;
}
.carousel-controls button.next {
float: right;
}
JavaScript代码(script.js):
document.addEventListener("DOMContentLoaded", function() {
var carousel = document.querySelector(".carousel");
var prevButton = carousel.querySelector(".prev");
var nextButton = carousel.querySelector(".next");
var items = carousel.querySelectorAll(".item");
var currentItem = 0;
prevButton.addEventListener("click", function() {
items[currentItem].classList.remove("active");
currentItem = (currentItem - 1 + items.length) % items.length;
items[currentItem].classList.add("active");
});
nextButton.addEventListener("click", function() {
items[currentItem].classList.remove("active");
currentItem = (currentItem + 1) % items.length;
items[currentItem].classList.add("active");
});
});
注意:上述示例中的图片路径需要根据实际情况进行修改,确保图片能够正确加载。你可以将图片替换为自己的图片,或者使用网络图片。