鏈接我的Web橫幅圖片到我創建了一個從無到有的網絡旗幟的URL

：鏈接我的Web橫幅圖片到我創建了一個從無到有的網絡旗幟的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頁面，並確保我的旗幟鏈接所有圖像正常。

來源

2016-07-22 WebLad

ü忘了設置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>

來源

2016-07-22 12:41:35 Varatharaj

非常感謝！很有幫助！ – WebLad

開始時，您沒有爲錨點設置href屬性，因此圖片由於靜態HTML而顯示，但錨點未命中網址。第一個週期後，它正常工作，因爲然後通過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/

來源

2016-07-22 12:31:44 mxlse

非常感謝！很有幫助！ – WebLad

雖然你身邊，有什麼辦法可以添加滾動或按鈕？ @mxlse – WebLad

你想添加這個的位置？ – mxlse

鏈接我的Web橫幅圖片到我創建了一個從無到有的網絡旗幟的URL

回答

相關問題