2015-12-02 179 views
0

我真的很沮喪與我的JS幻燈片,我試圖在幻燈片中實現鼠標懸停功能。當用戶將鼠標懸停在幻燈片上時,所有我需要的幻燈片都會暫停。似乎很容易?!不,我嘗試了不同的功能,但似乎沒有任何代碼。JavaScript停止暫停

<script type="text/javascript">// <![CDATA[ 
var imgs1 = new Array("http://www.cmsplc.com/media/wysiwyg/CMS_XMAS_BANNER_2.jpg","http://www.cmsplc.com/media/wysiwyg/Dymo_XTL_Range.jpg","http://www.cmsplc.com/media/wysiwyg/Banners/Homepage_Banners/Promotional_Banners/Fluke_Cashback_Upgrade_1.jpg","http://www.cmsplc.com/media/wysiwyg/Fluke_DTX_Buy_Back_2015.jpg"); 
var lnks1 = new Array("http://www.cmsplc.com/christmas-opening-times","http://www.cmsplc.com/dymo-xtl","http://www.cmsplc.com/fluke-dsx-upgrade-sept-2015/","http://www.cmsplc.com/fluke-networks-dtx-upgrade-offer/"); 
var alt1 = new Array(); 
var currentAd1 = 0; 
var imgCt1 = 4; 
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++; 
} 
window.setInterval("cycle1()",4000); 
// ]]></script> 
<p><a id="adLink1" target="_top"><img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/CMS_XMAS_BANNER_2.jpg" border="0" alt="" width="804" height="300" /></a></p> 

在上述的地方,我需要包括暫停功能??!

+0

你看到我的答案?您可以回覆評論... –

回答

1

一些變化。給這樣說:

// Put this on top. 
var intvl = 0; 

// Replace the setInterval line. 
intvl = window.setInterval("cycle1()",4000); 

並添加此事件處理程序:

// Add this at the end, may be before `<body />` inside a `<script>` tag. 
adBanner1.onmouseover = function() { 
    clearInterval(intvl); 
} 
adBanner1.onmouseout = function() { 
    intvl = window.setInterval("cycle1()",4000); 
} 

全碼

<p><a id="adLink1" target="_top"><img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/CMS_XMAS_BANNER_2.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/CMS_XMAS_BANNER_2.jpg","http://www.cmsplc.com/media/wysiwyg/Dymo_XTL_Range.jpg","http://www.cmsplc.com/media/wysiwyg/Banners/Homepage_Banners/Promotional_Banners/Fluke_Cashback_Upgrade_1.jpg","http://www.cmsplc.com/media/wysiwyg/Fluke_DTX_Buy_Back_2015.jpg"); 
    var lnks1 = new Array("http://www.cmsplc.com/christmas-opening-times","http://www.cmsplc.com/dymo-xtl","http://www.cmsplc.com/fluke-dsx-upgrade-sept-2015/","http://www.cmsplc.com/fluke-networks-dtx-upgrade-offer/"); 
    var alt1 = new Array(); 
    var currentAd1 = 0; 
    var imgCt1 = 4; 
    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> 
+1

感謝Praveen,您可以將更改添加到我發佈的代碼中嗎?我發現很難確定你的建議應該去哪裏...... – WebLad

+0

@WebLad看看更新的答案。 –

+1

你是一個安全的生活Praveen,非常感謝你!我一定會在社區中傳播你的名字,以獲得高質量的建議和幫助。再次感謝你! – WebLad