首页html 两张图轮播

html 两张图轮播

时间: 2023-12-19 20:30:49 浏览: 192

以下是一个基于HTML和JavaScript的两张图片轮播的例子： ```html <!DOCTYPE html> <html> <head> <title>图片轮播</title> <style> img { width: 100%; height: auto; } </style> </head> <body> <div> <img id="slider" src="image1.jpg"> </div> <div> <button onclick="start()">顺序轮播</button> <button onclick="stop()">停止轮播</button> <button onclick="reverse()">倒序轮播</button> </div> <script> var images = ["image1.jpg", "image2.jpg"]; // 图片数组 var index = 0; // 当前图片索引 var intervalId; // 定时器ID function start() { stop(); // 先停止之前的轮播 intervalId = setInterval(function() { index = (index + 1) % images.length; // 循环更新索引 document.getElementById("slider").src = images[index]; // 更新图片 }, 1000); } function stop() { clearInterval(intervalId); // 清除定时器 } function reverse() { stop(); // 先停止之前的轮播 intervalId = setInterval(function() { index = (index - 1 + images.length) % images.length; // 循环更新索引 document.getElementById("slider").src = images[index]; // 更新图片 }, 1000); } </script> </body> </html> ```

阅读全文