时间戳

首页 > 解决方案 > 在 JS 幻灯片中单击图像时转到其他 URL 和锚点

javascript - 在 JS 幻灯片中单击图像时转到其他 URL 和锚点

问题描述

我是网络编程的新手。我刚刚成功编写了（参考）一个 JS 幻灯片，但现在我想为幻灯片的每个图像添加一个 onclick 函数，以便在单击图像时，它会指向一个新的 URL 或锚点。

这是意图。单击幻灯片中的图像时：

  1. 转到新 URL（新浏览器窗口）
  2. 转到同一页面的锚点#（同一浏览器窗口）
  3. 转到另一个页面的锚点#（相同的浏览器窗口）

谷歌搜索结果我看到有太多的 JS 方法。而且我真的不知道在哪里以及在我的代码中添加什么（我试过了，但当然没有用）。document.getElementById(imageID).onclick或.href之类的方法使事情变得复杂。

我就是想看看有没有很简单的方法，不用花哨，只要几个代码就好了。我的代码如下：幻灯片仅使用头部和身体，如图所示：

//============这是我的 HTML 标头 (CSS)： 

<head>
   <style id="compiled-css" type="text/css">
        #image1 {
            opacity:1;
            transition: opacity 0.1s; 
        }
        #image1.fadeOut {
            opacity:0;
        }
   </style>  
</head>

//============这是带有 JS 幻灯片代码的 HTML 正文： 

    <div>
        <img id="image1" />
    </div>

    <script>
        var imgArray = [
            'http://my.image/imgs/slide1.jpg',
            'http://my.image/imgs/slide2.jpg',
            'http://my.image/imgs/slide3.jpg'],
            curIndex = 0;
            imgDuration = 3000;

        function slideShow() {
            document.getElementById('image1').className += "fadeOut";
            setTimeout(function() {
                document.getElementById('image1').src = imgArray[curIndex];
                document.getElementById('image1').width = 530;
                document.getElementById('image1').height = 400;
                document.getElementById('image1').className = "";        
            },100);   
            curIndex++;
            if (curIndex == imgArray.length) { curIndex = 0; }
            setTimeout("slideShow()", imgDuration);
        }
        slideShow();
    </script>
</body>

我真的不知道“转到 URL”应该在哪里。我想它必须在一个<script>？我只希望在幻灯片中使用最简单的方法来执行“每个图像点击到 URL”功能。谢谢！

标签： javascripthtml

解决方案

最简单的事情可能是将每个img标签包装在一个a链接到正确 URL 的标签中。这部分不需要使用 JS。

<div>
    <a href = "image1url">
        <img id="image1"/>
    </a>
</div>

推荐阅读