マウスが画像上にある限り、onmouseover の影響を使用して、現在表示されている画像に対応する新しい画像を中断して表示したい交互の画像の連続ループがあります。
私の問題をよりよく説明する例として、5 秒ごとに画面上で一連の画像を交互に表示したいと考えています (これは既に実行できます)。次に、マウスオーバー イベントが発生すると、画像の交互表示が停止し、表示されたばかりの画像に対応する新しい画像が表示されます (表示されていた画像を説明する別の画像になります)。また、マウスが画像の上にある間、画像が交互に表示されるのを止めたいです。
これまでのところ、最初の画像に対応する画像を表示することはできますが、残りを機能させることができないようです。また、マウスがまだ画像上にある間、交互の画像を停止することはできません。
これが私がこれまでに持っているものです:
<body>
<img src="image1.jpeg" alt="Image1" width="344" height="311" id="rotator" onmouseover="this.src='imageText1.jpeg'" onmouseout="this.src='image1.jpeg'">
<script type="text/javascript">
(function() {
var rotator = document.getElementById("rotator");
var imageDir = '';
var delayInSeconds = 5;
var images = ["image2.png", "image3.gif", "image4.png", "image5.jpeg","image6.gif", "image7.jpeg", "image1.jpeg"];
var num = 0;
if (rotator.onmouseover == )
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>