0

我正在尝试在右侧边栏上创建一个带有按钮链接的内容 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>
4

3 回答 3

0

只需在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>
于 2012-07-26T18:26:40.343 回答
0

这是一个 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);
    });
});
于 2012-07-26T18:39:41.017 回答
-1

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

$(function() { } );

反而。

于 2012-07-26T18:10:28.690 回答