将我的 Web 横幅图像链接到 URL答案

【问题标题】：Linking my Web Banner Image to a URL将我的 Web 横幅图像链接到 URL
【发布时间】：2016-07-22 12:09:52
【问题描述】：

我从头开始创建了一个网页横幅：

<p><a id="adLink1" target="_top"> <img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg" border="0" alt="" width="804" height="300" /></a></p>
<script type="text/javascript">// <![CDATA[
var imgs1 = new Array("http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg","http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/PatchSee_excess_stock_promo.jpg","http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/Dymo_XTL_Banner.jpg","http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/The_Copper_Solution_-_Homepage.jpg","http://www.cmsplc.com/media/wysiwyg/Slider_Banners/Assynia_Patch_Cords_-_Up_to_50_off.jpg","http://www.cmsplc.com/media/wysiwyg/Slider_Banners/Product_Range_-_May_1.jpg","http://www.cmsplc.com/media/wysiwyg/Fluke_DTX_Buy_Back_2015.jpg");
var lnks1 = new Array("http://www.cmsplc.com/summer-savings","http://www.cmsplc.com/patchsee-stock-promo-2016","http://www.cmsplc.com/dymo-xtl-trade-in","http://www.cmsplc.com/brands/corning/corning-copper/corning-copper-solution.html","http://www.cmsplc.com/brands/assynia/assynia-copper-connectivity/assynia-patch-cords.html","http://www.cmsplc.com/brands/netscout.html","http://www.cmsplc.com/fluke-networks-dtx-upgrade-offer");
var alt1 = new Array();
var currentAd1 = 0;
var imgCt1 = 7;
var intvl = 0;




function cycle1() {
  if (currentAd1 == imgCt1) {
    currentAd1 = 0;
  }
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
  banner1.src=imgs1[currentAd1]
  banner1.alt=alt1[currentAd1]
  document.getElementById('adLink1').href=lnks1[currentAd1]
  currentAd1++;
}

  intvl = window.setInterval("cycle1()",4000);

  adBanner1.onmouseover = function () {
    clearInterval(intvl);
  }
  adBanner1.onmouseout = function () {
    intvl = window.setInterval("cycle1()",4000);
  }
// ]]></script>

第一张图片没有链接到网页。以下所有图像完美链接。我相信我在这里遗漏了一些东西：

<p><a id="adLink1" target="_top"> <img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg" border="0" alt="" width="804" height="300" /></a></p>

请告知我如何将此图片链接到 URL 页面，并确保我的横幅链接上的所有图片都正确。

【问题讨论】：

标签： javascript html slider banner

【解决方案1】：

你忘记为 HTML 中的元素设置 href="http://www.cmsplc.com/summer-savings" 这就是为什么它不适用于第一个 Banner。这里是修改后的代码。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>

  <p>
    <a id="adLink1" target="_top" href="http://www.cmsplc.com/summer-savings">
      <img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg" border="0" alt="" width="804" height="300" />
    </a>
  </p>
  <script type="text/javascript">
    // <![CDATA[
    var imgs1 = new Array("http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg", "http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/PatchSee_excess_stock_promo.jpg", "http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/Dymo_XTL_Banner.jpg", "http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/The_Copper_Solution_-_Homepage.jpg", "http://www.cmsplc.com/media/wysiwyg/Slider_Banners/Assynia_Patch_Cords_-_Up_to_50_off.jpg", "http://www.cmsplc.com/media/wysiwyg/Slider_Banners/Product_Range_-_May_1.jpg", "http://www.cmsplc.com/media/wysiwyg/Fluke_DTX_Buy_Back_2015.jpg");
    var lnks1 = new Array("http://www.cmsplc.com/summer-savings", "http://www.cmsplc.com/patchsee-stock-promo-2016", "http://www.cmsplc.com/dymo-xtl-trade-in", "http://www.cmsplc.com/brands/corning/corning-copper/corning-copper-solution.html", "http://www.cmsplc.com/brands/assynia/assynia-copper-connectivity/assynia-patch-cords.html", "http://www.cmsplc.com/brands/netscout.html", "http://www.cmsplc.com/fluke-networks-dtx-upgrade-offer");
    var alt1 = new Array();
    var currentAd1 = 0;
    var imgCt1 = 7;
    var intvl = 0;




    function cycle1() {
      if (currentAd1 == imgCt1) {
        currentAd1 = 0;
      }
      var banner1 = document.getElementById('adBanner1');
      var link1 = document.getElementById('adLink1');
      banner1.src = imgs1[currentAd1]
      banner1.alt = alt1[currentAd1]
      document.getElementById('adLink1').href = lnks1[currentAd1]
      currentAd1++;
    }

    intvl = window.setInterval("cycle1()", 4000);

    adBanner1.onmouseover = function() {
      clearInterval(intvl);
    }
    adBanner1.onmouseout = function() {
        intvl = window.setInterval("cycle1()", 4000);
      }
      // ]]>
  </script>


</body>

</html>

【讨论】：

非常感谢！很有帮助！

【解决方案2】：

一开始您没有为锚点设置 href 属性，因此由于静态 HTML，图像正在显示，但锚点错过了 url。在第一个周期之后，它可以正常工作，因为 URL 是通过 javascript 设置的。

所以你必须改变

<p><a id="adLink1" target="_top">...

到

<p><a id="adLink1" target="_top" href="http://www.cmsplc.com/summer-savings">...

此外，您的window.setInterval("cycle1()",4000); 以错误的方式调用。应该是window.setInterval(cycle1,4000);

工作小提琴：https://jsfiddle.net/8u3heye0/

【讨论】：

非常感谢！很有帮助！
当你在身边时，有什么办法可以添加滚动条或按钮吗？ @mxlse
你想在哪里添加这个？