Question

我真的对我的JS幻灯片感到沮丧，我试图在幻灯片中实现鼠标悬停功能。当用户将鼠标悬停在幻灯片上时，我需要幻灯片播放才能暂停。看起来很简单吧？！不，我尝试合并不同的功能，但似乎没有任何东西坚持代码。

<script type="text/javascript">// <![CDATA[
var imgs1 = new Array("http://www.cmsplc.com/media/wysiwyg/CMS_XMAS_BANNER_2.jpg","http://www.cmsplc.com/media/wysiwyg/Dymo_XTL_Range.jpg","http://www.cmsplc.com/media/wysiwyg/Banners/Homepage_Banners/Promotional_Banners/Fluke_Cashback_Upgrade_1.jpg","http://www.cmsplc.com/media/wysiwyg/Fluke_DTX_Buy_Back_2015.jpg");
var lnks1 = new Array("http://www.cmsplc.com/christmas-opening-times","http://www.cmsplc.com/dymo-xtl","http://www.cmsplc.com/fluke-dsx-upgrade-sept-2015/","http://www.cmsplc.com/fluke-networks-dtx-upgrade-offer/");
var alt1 = new Array();
var currentAd1 = 0;
var imgCt1 = 4;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",4000);
// ]]></script>
<p><a id="adLink1" target="_top"><img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/CMS_XMAS_BANNER_2.jpg" border="0" alt="" width="804" height="300" /></a></p>

上面的内容我需要包含暂停功能??！

Answer 1

一些变化。这样说吧：

// Put this on top.
var intvl = 0;

// Replace the setInterval line.
intvl = window.setInterval("cycle1()",4000);

并添加此事件处理程序：

// Add this at the end, may be before `<body />` inside a `<script>` tag.
adBanner1.onmouseover = function () {
  clearInterval(intvl);
}
adBanner1.onmouseout = function () {
  intvl = window.setInterval("cycle1()",4000);
}

完整代码

<p><a id="adLink1" target="_top"><img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/CMS_XMAS_BANNER_2.jpg" border="0" alt="" width="804" height="300" /></a></p>
<script type="text/javascript">// <![CDATA[
  var imgs1 = new Array("http://www.cmsplc.com/media/wysiwyg/CMS_XMAS_BANNER_2.jpg","http://www.cmsplc.com/media/wysiwyg/Dymo_XTL_Range.jpg","http://www.cmsplc.com/media/wysiwyg/Banners/Homepage_Banners/Promotional_Banners/Fluke_Cashback_Upgrade_1.jpg","http://www.cmsplc.com/media/wysiwyg/Fluke_DTX_Buy_Back_2015.jpg");
  var lnks1 = new Array("http://www.cmsplc.com/christmas-opening-times","http://www.cmsplc.com/dymo-xtl","http://www.cmsplc.com/fluke-dsx-upgrade-sept-2015/","http://www.cmsplc.com/fluke-networks-dtx-upgrade-offer/");
  var alt1 = new Array();
  var currentAd1 = 0;
  var imgCt1 = 4;
  var intvl = 0;

  function cycle1() {
    if (currentAd1 == imgCt1) {
      currentAd1 = 0;
    }
    var banner1 = document.getElementById('adBanner1');
    var link1 = document.getElementById('adLink1');
    banner1.src=imgs1[currentAd1]
    banner1.alt=alt1[currentAd1]
    document.getElementById('adLink1').href=lnks1[currentAd1]
    currentAd1++;
  }

  intvl = window.setInterval("cycle1()",4000);

  adBanner1.onmouseover = function () {
    clearInterval(intvl);
  }
  adBanner1.onmouseout = function () {
    intvl = window.setInterval("cycle1()",4000);
  }
  // ]]>
</script>

JavaScript鼠标暂停

1 个答案: