如何使用js设计程序,给你若干张图片,通过单击上一张,下一张按钮实现图片的动态循环显示。【选做 如果没单击按钮,则每3秒钟自动循环显示下一张图片】
时间: 2023-06-07 11:11:48 浏览: 88
您可以使用jQuery编写此程序。首先,您需要在HTML文件中添加一些图片和上一张/下一张按钮。然后,使用以下代码实现循环轮换显示:
```javascript
// 定义全局变量
var currentImage = 0;
var allImages = $("img").length;
// 上一张图片按钮
$("#prev").click(function(){
if(currentImage > 0){
currentImage--;
} else {
currentImage = allImages - 1;
}
$("img").hide();
$("img").eq(currentImage).show();
});
// 下一张图片按钮
$("#next").click(function(){
if(currentImage < allImages - 1){
currentImage++;
} else {
currentImage = 0;
}
$("img").hide();
$("img").eq(currentImage).show();
});
// 自动轮换
setInterval(function(){
$("#next").click();
}, 3000);
```
注释:
- 首先定义了全局变量 `currentImage` 和 `allImages`,分别表示当前显示的图片下标以及所有图片数量。
- 然后监听上一张图片和下一张图片按钮的点击事件,根据当前图片下标判断并切换到上一张或下一张图片的位置,最后使用 `show()` 和 `hide()` 方法控制图片的显示和隐藏。
- 最后,使用 `setInterval()` 函数每隔3秒钟自动点击下一张图片按钮以实现自动轮换。
这样就能实现 您要求的程序功能了。
阅读全文