Javascript：鼠标悬停时停止横幅幻灯片（不适用于 Firefox）答案

【问题标题】：Javascript: Stop Banner slideshow when mouseover (not work in Firefox)Javascript：鼠标悬停时停止横幅幻灯片（不适用于 Firefox）
【发布时间】：2011-10-08 04:08:40
【问题描述】：

以下代码可以在 IE 中停止幻灯片横幅，但在 Firefox 中不能暂停？请帮忙。

谢谢。

乔

以下是我显示横幅的 javascript 代码：

var promotionTime;
var p=0;
var zone=0;

function changeBanner2(imgFile,imglink,altText){
//pause banner when mouseover
if((document.getElementById("promotionBanner").getAttribute("paused"))!=true)     {     
document.getElementById("promotionBanner").src=imgFile;
document.getElementById("promotionBanner").title=altText;
document.getElementById("bannerLink").href=imglink;
} }

function promotionBannerChanger(promotionImg,promotionLink,promotionAlt,num){
if(zone!=num){
    p=0;
    zone=num;
}

//set attribute to pause banner when mouseover
document.getElementById("promotionBanner").onmouseover =
                     function() { this.setAttribute("paused", true);}
document.getElementById("promotionBanner").onmouseout = 
                     function() { this.removeAttribute("paused");}

changeBanner2(promotionImg[p],promotionLink[p],promotionAlt[p]);
p++;
if(p>=promotionImg.length){
    p=0;
}
clearTimeout(promotionTime);
if(num==1)
    promotionTime=setTimeout("promotionBannerChanger(promotionImage1,promotionLink1,promotionAlt1,'1')",2000);
else if(num==2)
    promotionTime=setTimeout("promotionBannerChanger(promotionImage2,promotionLink2,promotionAlt2,'2')",2000);
else if(num==3)
    promotionTime=setTimeout("promotionBannerChanger(promotionImage3,promotionLink3,promotionAlt3,'3')",2000); }

ASP 代码：

            <td width="480" >
            <div id="banner" oonmouseover="paused=true;" onmouseout="paused=false;">
                    <a id="bannerLink" href="archive.htm"><img title="Hot Topic" src=./promotion/1/en/c1Lagge.GIF id="promotionBanner" width="480" height="252"  border="0"></a>
            </div>
                </td>
            </table>

【问题讨论】：

标签： javascript mouseover onmouseover onmouseout

【解决方案1】：

    <!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container_fairy_tale">
<div class="ws_images_fairy_tale"><ul>
    <li><img src="images/fairy%20tale/1.jpg" id="Img1"/></li>
    <li><img src="images/fairy%20tale/2.jpg" id="Img2"/></li>
    <li><img src="images/fairy%20tale/3.jpg" alt="3" title="3" id="Img2"/></li>
    <li><img src="images/fairy%20tale/4.jpg" alt="4" title="4" id="Img3"/></li>

</ul></div>

<div class="ws_shadow"></div>
</div>  
<script type="text/javascript" src="fairy_tale/js/wowslider.js"></script>
<script type="text/javascript" src="fairy_tale/js/script.js"></script>
<!-- End WOWSlider.com BODY section -->[enter link description here][1]

【讨论】：

请提供一些细节。

【解决方案2】：

document.getElementById("promotionBanner").onmouseover =
                         function() { this.setAttribute("paused", true); };
document.getElementById("promotionBanner").onmouseout = 
                         function() { this.removeAttribute("paused"); };


function changeBanner2(imgFile,imglink,altText){
    if(document.getElementById("promotionBanner").getAttribute("paused")) {
        document.getElementById("promotionBanner").src=imgFile;
        document.getElementById("promotionBanner").title=altText;
        document.getElementById("bannerLink").href=imglink;
    }
}

基本上，在悬停时，您将“paused”属性添加到promotionBanner，如果那是相关元素的话。如果超时功能在“暂停”属性处于活动状态时运行，请不要推进横幅。您可能还想从 changeBanner2 返回一个真/假值，以确定您是否推进计数器。这样，当鼠标离开并且横幅再次启动时，您将不会跳过图像。

【讨论】：

我发现它可以在 IE 上运行。但不适用于 Firefox。请帮忙。谢谢。
糟糕。我忘了关闭悬停的匿名函数。两者都应该有一个“};”在他们的行尾。

【解决方案3】：

要清除clearTimeout() 方法，您需要传递setTimeout() 引用变量。在您的情况下，它将是“promotionTime”。

例如clearTimeout(setTimeout_variable)。在你的情况下，`clearTimeout(promotionTime

附言您可以查看 w3schools.com 链接http://www.w3schools.com/js/js_timing.asp

代码示例：

elements = document.getElementById('promotionBanner');
elements.onmouseover = function (promotionTime) {
    clearTimeout(promotionTime);
}

【讨论】：