使用 JavaScript 制作页面效果攻略

步骤一：编写 HTML 结构

首先，需要在 HTML 文件中编写好需要添加效果的页面结构。无论是添加动态效果还是交互效果，都需要在 HTML 结构中做好必要的准备工作。可以使用类名、ID 等属性对需要操作的元素进行标记，方便后续在 JavaScript 中引用。

步骤二：引入 JavaScript 文件

在 HTML 文件中添加 <script> 标签，将 JavaScript 文件引入到页面中。一般建议将 JavaScript 文件单独放在一个文件中，方便维护和管理。

<script src="example.js"></script>

步骤三：编写 JavaScript 代码

通过编写 JavaScript 代码，实现所需的页面效果。下面给出两个示例说明。

示例一：弹出框效果

实现一个点击某个元素后弹出提示框的效果。

在 HTML 结构中添加一个按钮元素（例如 <button>）。
使用 JavaScript 给该元素添加点击事件，并在事件中执行弹出提示框的操作。

<button id="btn">点击弹出提示框</button>

var btn = document.getElementById("btn");  // 获取按钮元素
btn.onclick = function() {  // 给按钮添加点击事件
    alert("弹出提示框！");  // 弹出提示框
}

示例二：轮播图效果

实现一个自动轮播图片的效果。

在 HTML 结构中添加一个包含多个图片的容器元素（例如 <div>），并在容器元素中添加多个图片元素（例如 <img>）。
使用 JavaScript 给容器元素添加计时器，每隔一定时间切换到下一张图片。

<div id="slider">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

var slider = document.getElementById("slider");  // 获取容器元素
var index = 0;  // 当前图片索引
var intervalId = setInterval(function() {
    // 切换到下一张图片
    index++;
    if (index >= slider.children.length) {
        index = 0;
    }
    slider.style.left = "-" + (index * 100) + "%"  // 切换图片位置
}, 2000);  // 2秒钟切换一次图片