HTML+CSS实现全景轮播的示例代码
创建一个全景轮播效果可以通过HTML和CSS来实现，这里提供一个简单的示例代码。这个示例中，我们将使用HTML来构建基本的轮播结构，CSS来添加样式和实现轮播效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全景轮播示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
overflow: hidden;
}
.carousel {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel .panorama {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: absolute;
transition: transform 1s ease-in-out;
}
.carousel .prev, .carousel .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
padding: 10px;
text-align: center;
border-radius: 5px;
}
.carousel .prev {
left: 10px;
}
.carousel .next {
right: 10px;
}
@media (max-width: 600px) {
.carousel .prev, .carousel .next {
display: none;
}
}
</style>
</head>
<body>
<div class="carousel">
<div class="panorama" style="background-image: url('panorama1.jpg');"></div>
<div class="panorama" style="background-image: url('panorama2.jpg'); transform: translateX(100%);"></div>
<div class="panorama" style="background-image: url('panorama3.jpg'); transform: translateX(200%);"></div>
<div class="prev" onclick="movePanorama(-100)"><</div>
<div class="next" onclick="movePanorama(100)">></div>
</div>
<script>
var panoramas = document.querySelectorAll('.panorama');
var currentPanorama = 0;
function movePanorama(direction) {
var panoramaWidth = window.innerWidth;
currentPanorama = (currentPanorama + direction) % panoramas.length;
for (var i = 0; i < panoramas.length; i++) {
var pos = (i - currentPanorama) * 100;
panoramas[i].style.transform = 'translateX(' + pos + '%)';
}
}
</script>
</body>
</html>请注意，你需要将 'panorama1.jpg', 'panorama2.jpg', 'panorama3.jpg' 替换成你实际的全景图片的URL。
这个示例中，我们创建了一个简单的全景轮播效果，其中包含三个全景图。CSS样式实现了轮播图的基本样式和滑动效果，JavaScript脚本则负责在点击“<”和“>”按钮时切换全景图。