在这个数字时代，360度全景展示已经成为一种流行的网页交互方式。通过JavaScript，我们可以轻松实现这种效果，让用户能够上下左右旋转查看图像或场景，仿佛身临其境。下面，我将详细讲解如何使用JavaScript和HTML5制作一个简单的360度全景图。

一、准备工作

在开始之前，我们需要准备以下工具和资源：

  1. 图片素材：用于制作全景图的原始图片或场景素材。
  2. HTML文件：用于存放全景图展示的页面结构。
  3. CSS文件：用于美化页面和全景图样式。
  4. JavaScript文件：用于实现全景图的旋转效果。

二、HTML结构

首先，我们需要在HTML文件中创建一个容器来展示全景图。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>360度全景图展示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="panorama-container">
        <!-- 全景图图片 -->
        <img id="panorama-image" src="panorama.jpg" alt="全景图">
    </div>
    <script src="script.js"></script>
</body>
</html>

在这个例子中，我们创建了一个panorama-container容器，并在这个容器中插入了一个panorama-image图片元素，该图片将作为全景图的素材。

三、CSS样式

接下来，我们需要为全景图添加一些基本样式。以下是一个简单的CSS样式示例：

#panorama-container {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#panorama-image {
    width: 200%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

在这个例子中，我们设置了全景图容器的宽度和高度，并确保图片居中显示。我们还为图片添加了鼠标手势，当用户将鼠标悬停在图片上时，会显示一个指针。

四、JavaScript实现

最后，我们需要使用JavaScript来实现全景图的旋转效果。以下是一个简单的JavaScript示例：

document.addEventListener('DOMContentLoaded', function() {
    var panoramaImage = document.getElementById('panorama-image');
    var rotateSpeed = 0.5; // 旋转速度

    // 鼠标按下时记录起始角度
    panoramaImage.addEventListener('mousedown', function(e) {
        var startX = e.clientX;
        var startAngle = 0;

        // 鼠标移动时更新角度
        document.addEventListener('mousemove', function(e) {
            var currentX = e.clientX;
            var angle = (startX - currentX) * rotateSpeed;

            // 计算新的角度
            var newAngle = startAngle + angle;

            // 更新图片位置
            panoramaImage.style.transform = 'translate(-50%, -50%) rotate(' + newAngle + 'deg)';
        });

        // 鼠标释放时重置角度
        document.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', arguments.callee);
        });
    });
});

在这个例子中，我们为全景图图片添加了mousedown、mousemove和mouseup事件监听器。当用户按下鼠标时，记录起始角度；当用户移动鼠标时，根据移动距离和旋转速度计算新的角度，并更新图片的位置；当用户释放鼠标时，重置角度。

五、总结

通过以上步骤，我们就可以制作一个简单的360度全景图。当然，这只是一个基础的实现，你可以根据自己的需求添加更多的功能和样式。例如，可以添加缩放、全景图切换等功能，让全景图展示更加丰富和实用。