javascript实现点击按钮切换图片 javascript实现点击按钮切换图片

本文实例为大家分享了javascript实现点击按钮切换图片的具体代码，供大家参考，具体内容如下
效果图：

文章图片

首先搭建基本的结构

文章图片

【javascript实现点击按钮切换图片】其次设置显示的样式

* {margin: 0; padding: 0; }#div {width: 800px; height: 420px; margin: 20px auto; background-color: rgb(243, 119, 36); text-align: center; }button:hover {cursor: pointer; }

最重要的JavaScript部分

//预加载,等页面加载完毕后，再执行脚本window.onload = function () {var num = document.getElementsByTagName("img")[0]; //这里虽然只有一个img标签，但是num变量的结果依然是一个数组//定义图像地址var shuzu = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"]; //获取按钮var prev = document.getElementById("pre"); var next = document.getElementById("next"); var index = 0; //图片描述var p_desc = document.getElementById("desc"); p_desc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张"; //注意此处前面是字符串的拼接，实现加法需要用到括号//点击切换图片prev.onclick = function () {index--; //此处让它循环if (index < 0)index = shuzu.length - 1; num.src = https://www.it610.com/article/shuzu[index]; p_desc.innerHTML ="一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张"; //注意此处前面是字符串的拼接，实现加法需要用到括号}next.onclick = function () {index++; if (index > shuzu.length - 1)index = 0; num.src = https://www.it610.com/article/shuzu[index]; p_desc.innerHTML ="一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张"; //注意此处前面是字符串的拼接，实现加法需要用到括号}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。