我正在使用JavaScript/jQuery的一个页面上和我差不多完成了。我应该有旋转的内容(功能“rotatecontent”)和它的div在旋转的内容的地方显示出来时,相关按钮悬停。 我已经完成了这一切,除了当我从一个按钮悬停了,所有的div内容消失,原来rotatecontent功能无法恢复。我需要实现一个函数,让用户从按钮悬停后恢复。这里是我的JS:恢复功能了
<script type="text/javascript">
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);
$('li').hover(
function() {
$(this).addClass("hover");
clearInterval(i); // when mouse is over object
},
function() {
$(this).removeClass("hover");
setInterval(rotatecontent, 1000); //when mouse is no longer over object
}
);
});
</script>
这里是我的HTML:
<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>
<ul id="container" overflow:hidden>
<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div1').show());" onMouseOut=""><img src="../Work/Images/BAB.com_web_link_10.jpg" width="250" height="100" class="Bab-image"></a></li>
<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div2').show());" onMouseOut=""><img src="../Work/Images/SLU_on_the_Road.jpg" class="sluotr-image"> </a></li>
<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div3').show());" onMouseOut=""><img src="http://slu.edu/Images/graduate/Billiken_Blogs.jpg" class="blogs- image"></a></li>
<li ><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div4').show());" onMouseOut=""><img src="http://slu.edu/Images/graduate/SLU_Chat.jpg" class="chat-image"> </a></li>
<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div5').show());" onMouseOut=""><img src="http://slu.edu/Images/graduate/Viewbook_Button_2011.jpg" class="view-image"></a>
</li>
</ul>
你在标记有很多问题(多余空间,缺少的属性名称不正确的大写)是这样的复制/粘贴你的实际代码? – MrOBrian 2012-08-09 20:53:04
可以更改'messages.get(curcontentindex).style.display = “块”;''到messages.eq(curcontentindex).show();'。与你的问题无关。 – epascarello 2012-08-09 20:55:53