请举三个用JavaScript或者表单元素制作的网页动态效果，给出代码并解释代码

1. 图片轮播效果：
代码：

<div>
    <img id="image" src="image1.jpg">
    <button onclick="prev()">Prev</button>
    <button onclick="next()">Next</button>
</div>

<script>
var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImageIndex = 0;

function next() {
    currentImageIndex ++;
    if (currentImageIndex >= images.length) {
        currentImageIndex = 0;
    }
    document.getElementById("image").src = images[currentImageIndex];
}

function prev() {
    currentImageIndex --;
    if (currentImageIndex < 0) {
        currentImageIndex = images.length - 1;
    }
    document.getElementById("image").src = images[currentImageIndex];
}

setInterval(next, 5000);
</script>

解释：
代码中定义了一个图片数组，以及一个变量来记录当前显示的图片的索引。通过两个按钮和对应的函数实现切换图片的功能。定时器setInterval()用来定时执行next()函数，实现自动轮播效果。

2. 下拉菜单选择效果：
代码：

<select id="dropdown" onchange="select()">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

<script>
function select() {
    var dropdown = document.getElementById("dropdown");
    var selectedValue = dropdown.options[dropdown.selectedIndex].value;
    alert(selectedValue);
}
</script>

解释：
代码中创建了一个下拉菜单，并给它绑定了一个onchange事件，当用户选择一个选项时，会触发select()函数，通过获取下拉菜单中被选择的选项的value属性，实现根据用户的选择展示不同的信息或功能。

3. 验证码生成效果：
代码：

<form>
    <input type="text" id="input">
    <button onclick="generate()">Generate Code</button>
    <button onclick="check()">Check Code</button>
    <canvas id="canvas"></canvas>
</form>

<script>
var code = "";

function generate() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    code = "";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < 4; i++) {
        var char = chars.charAt(Math.floor(Math.random() * chars.length));
        code += char;
        ctx.font = "bold 40px Arial";
        ctx.fillStyle = "#000";
        ctx.fillText(char, 10 + i * 50, 50);
    }
}

function check() {
    var input = document.getElementById("input");
    if (input.value === code) {
        alert("Correct!");
    } else {
        alert("Incorrect!");
    }
    generate();
}
</script>

解释：
代码中定义了一个canvas元素，用来生成验证码图片。在generate()函数中，通过产生随机的字符和字体样式生成验证码图片，并记录正确的验证码。在check()函数中，检查用户输入的验证码和正确的验证码是否匹配，如果匹配则提示正确，清除之前的验证码并重新生成，否则提示错误。通过这种方式可以有效防止机器人攻击等恶意行为。