Question

我正在尝试使用右侧边栏上的按钮链接创建内容div。当用户没有悬停在任何按钮上时，内容应该通过五个按钮主题中的每一个旋转（我已完成此操作）。此外，当用户将鼠标悬停在特定按钮上时，应该发生的事情是：a）停止旋转，b）仅显示与该按钮相关的内容主题。

目前我可以做的就是轮换主题（使用Javascript函数）并使内容在悬停时显示和消失（在HTML中）。请帮忙吗？

<script>
function rotatecontent(){
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
futcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex+1
messages[prevcontentindex].style.display="none"
messages[curcontentindex].style.display="block"
messages[futcontentindex].style.display="none"
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 1000)
}
}

$('#container li').hover(function() {
    clearInterval(interval);
}, function() {
    interval = setInterval("rotatecontent()", 1000);
});

</script>

HTML：

 <body>


 <ul id="container">

 <li><a href="#">
 <img src="image1.jpg" width="250" height="100" class="Bab-
 image"></a></li>


 <li><a href="#"><img src="image2.jpg" class="sluotr-image 
 </a></li>

 <li><a href="#"><img src="image3.jpg" 
 class="blogs-image"></a></li>

 <li><a href="#"><img src="image4.jpg" class="chat-
 image"></a></li>

 <li><a href="#"><img src="image5.jpg" 
 class="view-image"></a>
 </li>

 </ul>

 <div class="dyncontent">
 <div id="div1">Content 1</div>
 <div id="div2" style="display:none">Content 2</div>
 <div id="div3" style="display:none">Content 3</div>
 <div id="div4" style="display:none">Content 4</div>
 <div id="div5" style="display:none">Content 5</div>
 </div>
 </body>
 </html>

Answer 1

只需在interval之外声明变量window.onload function，使其成为global变量（因此可以被其他函数访问），即

var interval=0;
window.onload=function(){
    // other code goes here
    interval=setInterval(rotatecontent, 1000); // use the variable here
}

或进行如下整体更改

<script type="text/javascript">
    function rotatecontent(){ 
        // Your function's code here 
    }

    $(document).ready(function(){
        var interval=setInterval(rotatecontent, 1000);

        $('#container li img').hover(function() {
            clearInterval(interval);
        }, function() {
            interval = setInterval(rotatecontent, 1000);
        });
    });
</script>

Answer 2

这是一个jsfiddle旋转，直到你将鼠标悬停在其中一个超链接上，然后在你离开时恢复：http://jsfiddle.net/58pms/11/（更新的jsfiddle，原始只经过一次旋转）

我觉得很难说原始代码有什么问题，因为我必须添加一些样本中缺少的变量声明和HTML。我还拿出了事件处理程序，这些事件处理程序会显示你为了简单而悬停的项目，因为我认为这不是你的主要问题。

HTML：

<ul id="container" overflow:hidden>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>
<div class="dyncontent">
<div id="div1">Be A Billiken</div>
<div id="div2" style="display:none">Be A Billiken 2</div>
<div id="div3" style="display:none">Be A Billiken 3</div>
<div id="div4" style="display:none">Be A Billiken 4</div>
<div id="div5" style="display:none">Be A Billiken 5</div>
</div>

脚本：

var messages;
var curcontentindex = 0;
var prevcontentindex;
var futcontentindex;
var i;

function rotatecontent() {
    messages.hide();
    curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0;
    messages.get(curcontentindex).style.display = "block";
}


$(function() {
    messages = $('.dyncontent').find('div');
    i = setInterval(rotatecontent, 1000);


    $('#container li').hover(function() {
        clearInterval(i);
    }, function() {
        i = setInterval(rotatecontent, 1000);
    });
});

Answer 3

当你已经在使用jQuery时，不要使用window.onload。使用

$(function() { } );

代替。

关闭鼠标悬停功能 - Javascript，jQuery

3 个答案: