私は最初からバナーを作成した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>

最初画像は、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>

この画像をURLページにリンクして、どのようにして自分のバナーリンクの画像が正しく表示されるようにするかを教えてください。

出典

2016-07-22 WebLad

Uはなぜ最初のバナーのために働いていないのだHTMLの要素のHREF =「http://www.cmsplc.com/summer-savings」設定を忘れてしまった：それはwindow.setInterval(cycle1,4000);

の作業フィドルする必要がありますこれは変更されたコードです。

<!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のためにイメージが表示されていましたが、アンカーがURLを見落としていました。最初のサイクルの後、javascriptを使用してURLが設定されているため、正しく動作しています。

だからあなたはまた、あなたのwindow.setInterval("cycle1()",4000);は間違った方法で呼び出され

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

へ

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

を変更する必要があります。 https://jsfiddle.net/8u3heye0/

出典

2016-07-22 12:31:44 mxlse

どうもありがとうございました！非常に役立ちます！ – WebLad

あなたの周りには、スクロールやボタンを追加する方法はありますか？ @mxlse – WebLad

あなたはこれを追加したいですか？ – mxlse

私は最初からバナーを作成したURL

答えて

関連する問題