JavaScript 鼠标悬停

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 鼠标悬停

JavaScript Mouse Over Pause

javascript

css

mouseover

web