Noone� 2022-05-28 10:59 采纳率: 100%
浏览 58
已结题

html给每一个图片加上链接

问题遇到的现象和发生背景

想给每一个图片上都添加上链接,无奈我不会,求解答

问题相关代码,请勿粘贴截图
<title></title>
<style>
   *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
   opxqqq{ list-style-type: none;}  
    #box{
        position: relative;
        /* 定位:生成相对定位的元素,相对于其正常位置进行定位。 */
        width: 512px;
        height: 768px;
        /* 长款大小 */
        margin: 20px auto;
        /* 外边框20像素依赖于运行的系统 */
    }
    </style>
</head>
<body>
    <div id="box">
        <span id="text"></span>
            <div>
            <img id="img" alt="">
            </div>
        <button id="pret">上一个</button>
        <button id="next">下一个</button>
    </div>
    <audio autoplay="autoplay" "loop="loop" preload="auto"
                src="tank.mp3">
    </audio>
    <!-- <a href="http://www.php.cn"><src="img/bg_1.jpg"> </a> -->
    
    <script>
        //图片地址数组
        let imgArr = ["img/bg_1.jpg" ,
            "img/tcs1.png",
            "img/cjml.png",
            "img/wzq111.png"
        ]
        var xii=["cjdz.html","snack.html","superm.html","fivedot.html"]
        let img = document.getElementById("img"); //img标签
        let pret = document.getElementById("pret"); //上一个按钮dom
        let next = document.getElementById("next"); //下一个按钮dom
        let text = document.getElementById("text"); //文字显示
        let dizhi = document.getElementById("tt"); 
        var i = 0;
        defaultImg(imgArr, img, i, text);
        next.addEventListener("click", () => {
            nextFn(imgArr, img)
        })
        pret.addEventListener("click", () => {
            prextFn(imgArr, img)
        })
        function defaultImg(arr, img, index, text) { //默认的图片  arr-图片数组 。img是图片dom,index-是下标 text-是文字标签dom
            img.src = arr[index];
            text.innerText = `共计${arr.length}个游戏,当前是第${index + 1}个`
        }
        function prextFn(arr) { //上一张
            if (i == 0) {
                i = arr.length - 1;
                img.src = arr[arr.length - 1];//加上这个就是到了第一张,再次点击就回到最后一张,不想要可以注释
                text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
                alert("已经是最后一个游戏了,点击将返回第一个"); //如果不想这样可以把这三行注释掉
                return
            }
            i--;
            img.src = imgArr[i];
            text.innerText = `共计${arr.length}个游戏,当前是第${i}个游戏`
        }
        function nextFn(arr) { //下一张
            if (i == arr.length - 1) {
                i = 0;
                img.src = arr[0]; //加上这个就是到了最后一张,再次点击就回到第一张,不想要可以注释
                text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
                alert("已经是最后一个游戏了,点击将返回第一个"); //如果不想这样可以把这三行注释掉
                return
            }
            i++;
            img.src = arr[i];
            text.innerText = `共计${arr.length}个游戏,当前是第${i + 1}个游戏`
        }
    </script>
</body>
运行结果及报错内容
我的解答思路和尝试过的方法

别人说的a标签包裹住,我只能添加上一个链接

我想要达到的结果
  • 写回答

2条回答 默认 最新

  • 你好!机器人 2022-05-28 11:03
    关注

    在img外层加个a标签

    <a href="#"><img src=""/></a>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月6日
  • 已采纳回答 5月29日
  • 修改了问题 5月29日
  • 创建了问题 5月28日

悬赏问题

  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测
  • ¥88 python部署量化回测异常问题