将我的 Web 横幅图片链接到 URL

Question

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

<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>

第一个 图像没有link 进入网页。以下所有图片 link 完美。我相信我在这里遗漏了一些东西：

<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>

请告知我如何 link 将此图片添加到 URL 页面并确保我的横幅上的所有图片 link 正确。

Answer 1

开始时您没有为锚点设置 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);

工作fiddle：https://jsfiddle.net/8u3heye0/

Answer 2

你忘记为 HTML 中的元素设置 href="http://www.cmsplc.com/summer-savings" 这就是为什么它首先不起作用的原因 Banner.Here 是修改后的代码。

<!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>

将我的 Web 横幅图片链接到 URL

Linking my Web Banner Image to a URL

html

javascript

slider

banner