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 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分