2016-07-22 8 views
1

Я создал веб-баннер с нуля:Связывание мой веб-баннер изображение с URL

<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 и убедитесь, что все изображения на моем баннерной ссылке правильно.

ответ

1

U забыл установить HREF = «http://www.cmsplc.com/summer-savings» для элемента в HTML, поэтому он не работаю для первого Знамени . Это модифицированный код.

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

+0

Большое спасибо! Очень полезно! – WebLad

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

Работы скрипки: https://jsfiddle.net/8u3heye0/

+0

Большое спасибо! Очень полезно! – WebLad

+0

Пока вы вокруг, есть ли способ добавить свиток или кнопки? @mxlse – WebLad

+0

Где вы хотите добавить это? – mxlse

 Смежные вопросы

  • Нет связанных вопросов^_^