横幅旋转图像。单击时每个图像都会发送到不同的 URL（香草 javascript）答案

【问题标题】：Banner rotating images. Each image when clicked sends to a different URL (vanilla javascript)横幅旋转图像。单击时每个图像都会发送到不同的 URL（香草 javascript）
【发布时间】：2020-06-02 00:58:43
【问题描述】：

我已经获得了两个示例来说明如何做到这一点，但两者都没有做我想做的事情。我的网站应该包括：

旋转图片横幅（3 张图片），每隔几秒就会改变一次
每张图片都应该是可点击的，并将您重定向到不同的 URL

在我们最近的讲座中，教授在白板上写下了这段代码，并说这就是你的做法。但是，它对我不起作用。

<html>
 <head>
     <script language=JAVASCRIPT type=TEXT/JAVASCRIPT>
     //I'm not sure when to use '' or ""
     //I replaced some of the "picture.jpg" images with links to images. I'm not sure if I used the right syntax. 
     adImages = new Array("https://i.picsum.photos/id/666/800/200.jpg", 
                          "https://i.picsum.photos/id/420/800/200.jpg", 
                          "https://i.picsum.photos/id/888/800/200.jpg");
 adURL = new Array("https://google.com","https://github.com","https://stackoverflow.com");
 thisAd = 0;
 //length of what?
 imgCt = adImages.length;

 function rotate()
 {
  if (document.images)
  {
    thisAd++;
    //Is it better practice to use "==="?
    if (thisAd == imgCt)
    {
      thisAd = 0;
    }
    document.adBanner.src=adImages[thisAd];
      setTimeout("rotate()", 2 * 1000);
  }
 }

 function newLocation()
 {
  document.location.href = adURL[thisAd];
 } 
 </script>
 </head>
     //I don't understand what this is at all
     <body onload=rotate()>
         //Apparently <center> is obsolete?
         <center>
             <p><font size=4>Rotating Banner <font color=#ff0000>Assignment 6</font> Rotate Party - 
             Udemy</font> 
             </p>
         <a href="javascript:newLocation()"><IMG height=105 alt="Ad Banner" 
         src="https://i.picsum.photos/id/666/800/200.jpg" width=610 name=adBanner></a>
         </center>
   </body>
  </html>

只是提个醒。在过去的几周里，我一直在 Reddit 上发布我的课堂幻灯片，并且我收到了很多关于事情已经过时的问题。如果可以，请给我一些比你看到我学习的更现代或更好的做法的例子。如果您有兴趣，可以在这里找到关于我在社区大学学习 JavaScript 的经历的对话：https://www.reddit.com/user/gettupled/

我们得到的第二个例子是一个 YouTube 视频，它给出了以下例子。但是，它不包括单击图像并将其发送到 URL 的选项。我不确定在邮件正文中发布 HTML、CSS 和 Javascript 代码是否很常见，所以除非另有说明，否则我只会附上一个代码笔。此代码来自 Travesy Media。

https://codepen.io/vitalwheat/pen/QWbEyqN

谢谢大家。这是我在这里的第一篇文章。你好。

【问题讨论】：

你好@WheatimasMaximas，你的代码对我来说很好用。图像每 2 秒更改一次，并在点击时重定向到指定的 url。
谢谢@AkashBhardwaj。我看到了。我右键单击图像以尝试在另一个选项卡中打开它。我认为这就是导致我的问题的原因。

标签： javascript html css arrays function

【解决方案1】：

有很多方法可以实现这一点。这是其中一种方法。

working Demo

(function() {
  "use strict";

  const imageList = [
    "https://i.picsum.photos/id/666/800/200.jpg",
    "https://i.picsum.photos/id/420/800/200.jpg",
    "https://i.picsum.photos/id/888/800/200.jpg"
  ];

  const urlList = [
    "https://google.com",
    "https://github.com",
    "https://stackoverflow.com"
  ];

  function createRotatingBanner(rotationTime) {
    const $adsBanner = document.querySelector(".adBanner");
    let $bannerList;

    let currentBannerRendered = 0;

    function renderBanner() {
      Array.from($bannerList).forEach((banner, bannerIndex) => {
        banner.className = bannerIndex === currentBannerRendered ? "" : "hide";
      });
      currentBannerRendered = (currentBannerRendered+1)%$bannerList.length;
    }

    // creating Banner image and setting them to hide
    function createBanner() {
      const fragement = new DocumentFragment();

      imageList.forEach((image, index) => {
        const banner = document.createElement("img");
        banner.src = image;
        // wrapping image with anchor element
        const anchor = document.createElement("a");
        anchor.href = urlList[index];
        // hide all the banner
        anchor.className = "hide"
        anchor.appendChild(banner);
        fragement.appendChild(anchor);
      });
      const cloneFragement = [...fragement.children];
      $adsBanner.appendChild(fragement);
      return cloneFragement;
    }

    $bannerList = createBanner();
    renderBanner();

    setInterval(renderBanner, rotationTime);
  }

  createRotatingBanner(2000);
})();

.hide {
  display: none;
}

&lt;div class="adBanner"&gt;&lt;/div&gt;

【讨论】：