2015-12-02 182 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