2

以下代码实质上是为横幅设置动画。横幅每五秒交换一次，图像映射也是如此。我想要实现的是，当用户将鼠标悬停在横幅上时，五秒倒计时暂停（或重置），直到用户将鼠标光标从悬停中移开。

我还希望它能够早于 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/

有什么建议么？

4

2 回答 2

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/

于 2013-09-27T10:32:41.900 回答
1

您可以清除悬停图像地图的间隔，并在离开地图时恢复它。

$('map').hover(function() {
    window.clearInterval(intervalBanner);
}, function() {
    intervalBanner = window.setInterval(fadeBanner, 5000);
});

为此，我在自己的函数中交换了淡入淡出功能。因此，您可以随时通过调用恢复它window.setInterval(fadeBanner, 5000);。

例如：http: //jsfiddle.net/fEXEg/5/

于 2013-09-27T10:27:05.077 回答