以下代码基本上为横幅设置了动画。横幅每五秒交换一次,图像映射也是如此。我想要实现的是当用户在横幅上盘旋时,五秒钟倒计时会暂停(或重置),直到用户从鼠标悬停中移除鼠标光标。
我也希望这与IE8兼容,就像平板电脑/手机一样,我认为这种方法不会很好用,所以稍后会找工作。
考虑:
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 5000);
});
和
.fadein {
display: block;
margin:auto;
height: 49px;
width:100%;
}
.fadein img {
position:absolute;
}
和
<div class="fadein">
<img src="http://www.boohoo.com/content/ebiz/boohoo/resources/images/topbanners/Offer_Strip_GBP_v1.jpg" usemap="#secondM" border="0" width="964" height="49" alt="" style="" id="level2Menu"/>
<img src="http://www.boohoo.com/content/ebiz/boohoo/resources/images/topbanners/Offer_Strip_EUR_v1.jpg" usemap="#secondM2" border="0" width="964" height="49" alt="" style="" id="level2Menu"/>
</div>
<map name="secondM">
<area shape="rect" coords="0,0,285,44" href="#" alt="New In" title="New In" />
<area shape="rect" coords="289,0,671,44" href="#" alt="Delivery Details" title="Delivery Details" />
<area shape="rect" coords="676,0,960,44" href="#" alt="Unidays" title="Unidays" />
</map>
<map name="secondM2">
<area shape="rect" coords="0,0,285,44" href="#" alt="New In2" title="New In2" />
<area shape="rect" coords="289,0,671,44" href="#" alt="Delivery Details2" title="Delivery Details2" />
<area shape="rect" coords="676,0,960,44" href="#" alt="Unidays2" title="Unidays2" />
</map>
你可以在这里看到一个工作小提琴:http://jsfiddle.net/fEXEg/1/
有什么建议吗?
答案 0 :(得分:2)
您需要将悬停状态存储在某处(最好是在该淡入淡出div的数据属性中)并在每个循环中检查它。
$(function () {
var fElement = $('.fadein');
fElement.find('img:gt(0)').hide();
setInterval(function () {
if (!fElement.data('paused')) {
fElement.find(':first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
} else {
console.log('waiting...');
}
}, 5000);
$('map').hover(
function() {
console.log('pausing');
fElement.data('paused', 1);
},
function() {
console.log('unpausing');
fElement.data('paused', 0);
}
);
});
这还允许您每5秒钟进行一次额外的处理,同时仍停止播放该动画(例如将状态记录到Google Analytics中,通过AJAX刷新会话等)。
更新了jsFiddle:http://jsfiddle.net/fEXEg/7/
答案 1 :(得分:1)
您可以清除悬停在图像映射上的间隔,并在离开地图时将其恢复。
$('map').hover(function() {
window.clearInterval(intervalBanner);
}, function() {
intervalBanner = window.setInterval(fadeBanner, 5000);
});
为此我已经在自己的函数中转换了淡入淡出函数。因此,您可以随时通过调用window.setInterval(fadeBanner, 5000);
恢复它。