JavaScript 是一种非常强大的编程语言，可以用来实现各种复杂的交互和动态效果，下面介绍几个简单的 JavaScript 特效，这些特效不需要复杂的编程技能，适合初学者和简单的网站美化。
一、页面加载时显示/隐藏元素
在页面加载时显示或隐藏某些元素是一个常见的需求，使用 JavaScript 可以很容易地实现这个效果，以下是一个简单的例子：
<!DOCTYPE html>
<html>
<body>
<h1 id="title" style="display:none">欢迎来到我的网站</h1>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction() {
var x = document.getElementById("title");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>在这个例子中，我们有一个标题元素，它的初始样式是 `display:none`，这意味着在页面加载时它会被隐藏，我们还有一个按钮，当用户点击按钮时，它会触发 `myFunction` 函数，这个函数会检查标题元素的 `style.display` 属性，如果它是 "none"，则将其更改为 "block"，从而显示标题；否则将其更改为 "none"，从而隐藏标题。
二、图片轮播
图片轮播是一个常见的网页效果，可以通过 JavaScript 和 CSS 实现，以下是一个简单的例子：
<!DOCTYPE html>
<html>
<body>
<div id="slider">
<img id="slide" src="img1.jpg" style="width:100%">
</div>
<button onclick="changeImage(-1)">上一张</button>
<button onclick="changeImage(1)">下一张</button>
<script>
var images = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];
var current = 0;
function changeImage(direction) {
current += direction;
if (current < 0) current = images.length - 1;
if (current == images.length) current = 0;
document.getElementById("slide").src = images[current];
}
</script>
</body>
</html>在这个例子中，我们有一个包含图片 URL 的数组 `images`，以及一个变量 `current` 用于跟踪当前显示的图片，`changeImage` 函数接受一个方向参数，表示要显示上一张还是下一张图片，它更新 `current` 的值，然后使用 `document.getElementById("slide").src` 将新的图片 URL 应用到 slide 元素上，通过点击按钮，用户可以手动切换图片，实现简单的图片轮播效果。
