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

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

<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页面，并确保我的横幅链接上的所有图片都正确。

U忘记设置href="http://www.cmsplc.com/summer-savings"对于HTML中的元素，这就是为什么它不适用于第一个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>

一开始您没有为锚点设置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/

相关内容

最新更新

热门标签：