如何用javascript实现三张以上的图片在点击图片时切换到下一张,我是初学者,希望用数组和循环实现求代码

 我来答
马后雷鼓下扬州5058
推荐于2017-11-25 · TA获得超过4321个赞
知道小有建树答主
回答量:693
采纳率:33%
帮助的人:807万
展开全部
<script type="text/javascript">
window.onload = function() {
    // 图片地址数组
    var image_urls = ["first.jpg", "second.jpg", "third.jpg", "fourth.jpg"];
    // 初始化数组键值 (0 = 第一个图片)
    var idx = 0;
                                                                          
    // 点击 id 为 img 的图片
    document.getElementById("img").onclick = function() {
        // idx + 1,如果为最后一张,还原回第一张
        idx = idx === image_urls.length - 1 ? 0 : idx + 1;
        // 设置 src
        this.src = image_urls[idx];
        // 测试
        alert(this.src);
    };
};
</script>


<img id="img" src="first.jpg" />


上面代码只用了一个 img,点击更换地址。


还是你想全部隐藏(除当前图片),点击后显示下一张?

追问

你的那个我不太懂,能帮我改一下我的这个代码吗?不知道问题出在哪里了!!急!!!

追答
其实我写的和你的这个思路是一样的

你的代码中当点击的时候需要判断当前键值是 0 或 1 或 2,如果是 2 则还原到 0,反之 +1

把你的 function 改为下面这样就可以了,myimage[x] 不能加引号,因为是变量。

function changeimage() {
x = (x === myimage.length - 1) ? 0 : x + 1;
document.getElementById("myimage").src = myimage[x];
}
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式