点击按钮上下切换图片

最新推荐文章于 2023-03-21 21:05:33 发布

搞点钱钱

最新推荐文章于 2023-03-21 21:05:33 发布

阅读量621

点赞数 1

文章标签： JavaScript 图片轮播 DOM操作事件监听数组

本文链接：https://blog.csdn.net/WG9797/article/details/118078460

版权

<body>

//首先给定一张图片和两个按钮

</div>

// 将所有图片放在一个数组里

var imgsArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];

//获取元素

var imgs = document.getElementsByTagName("img")[0];

// 创建一个变量，保存当前显示图片的索引

var index = 0;

var btn1 = document.getElementById("up");

btn1.onclick = function() {

//当点击上一张的时候，图片的索引减小

index--;

//如果图片切换到第一张再切换时，此时变为最后一张

if (index < 0) {

index = imgsArr.length - 1;

}

imgs.src = imgsArr[index];

}

var btn2 = document.getElementById("down");

btn2.onclick = function() {

//同理点击下一张的时候，让图片索引变大

index++;

//当图片切换到最后一张时，再切换就变成第一张

if (index > imgsArr.length - 1) {

index = 0;

}

imgs.src = imgsArr[index];

};

</script>

</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注