暂停鼠标滑动图像并在鼠标移出后继续滑动 [英] to pause sliding image on mouse over and continue the sliding after mouse out
问题描述
script type =text / javascript>
var image1 = new Image（）
image1.src =images / flas.jpg
var image2 = new Image（）
image2.src =images / flash8.jpg
var image3 = new Image（）
image3.src =images / bb.jpg
var image4 = new Image（）
image4.src =images / kids.jpg
var image5 = new Image（）
image5.src =images / flash5.jpg
< / script>
< script type =text / JavaScript>
< script>
var pauseSlide = true;
var step = 1
function slideit（）{
文件。 images.onmouseover = fu nction（）{
pauseSlide = false;
};
document.images.onmouseout = function（ ）{
pauseSlide = true;
};
if（！document.images）
返回
if（pauseSlide）{
document.images.slide.src = eval（image+ step +。src）
if（step< 5）
step ++
else
step = 1
setTimeout（slideit（），3000）;
}
}
slideit（）;
script type="text/javascript">
var image1=new Image()
image1.src="images/flas.jpg"
var image2=new Image()
image2.src="images/flash8.jpg"
var image3=new Image()
image3.src="images/bb.jpg"
var image4=new Image()
image4.src = "images/kids.jpg"
var image5 = new Image()
image5.src = "images/flash5.jpg"
</script>
<script type="text/JavaScript">
<script>
var pauseSlide = true;
var step = 1
function slideit() {
document.images.onmouseover = function () {
pauseSlide = false;
};
document.images.onmouseout = function () {
pauseSlide = true;
};
if (!document.images)
return
if (pauseSlide) {
document.images.slide.src = eval("image" + step + ".src")
if (step < 5)
step++
else
step = 1
setTimeout("slideit()",3000);
}
}
slideit();
推荐答案
1。将事件监听器附加到图像上鼠标悬停
2.将settimeout存储到变量中，然后可以在鼠标悬停时调用取消计时器。
学习如何适应例如：
1. Attach an event listener to mouseover on the image
2. store the settimeout to a variable which can then be called to cancel the timer upon mouseover.
Learn to adapt from this example:
<!DOCTYPE html>
<html>
<body>
<img id="slide" src="images/pic1.jpg">
<script>
var image1=new Image()
image1.src="images/pic1.jpg"
var image2=new Image()
image2.src="images/pic2.jpg"
var image3=new Image()
image3.src="images/pic3.jpg"
var image4=new Image()
image4.src = "images/pic4.jpg"
var image5= new Image()
image5.src = "images/pic5.jpg"
// get the image element
var slide = document.getElementById("slide");
// add event listener to the image element
slide.addEventListener("mouseover", function(){stopSlide()}, false);
var step = 1;
var timeout;
function slideit() {
slide.src = eval("image" + step + ".src");
if (step < 5)
step++
else
step = 1
// store the timer
timeout = setTimeout("slideit()",3000);
}
function stopSlide() {
// cancel the timer
clearTimeout(timeout);
}
slideit();
</script>
</body>
</html>
这篇关于暂停鼠标滑动图像并在鼠标移出后继续滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
