当鼠标悬停在图像上时，幻灯片将作为gif图像启动 [英] when mouse over image slide is start as gif image
本文介绍了当鼠标悬停在图像上时，幻灯片将作为gif图像启动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在同一个文件夹中有5张图片。 1.jpg、2.jpg、3.jpg、4.jpg、5.jpg 我将只在我的网页上显示一张图片。 示例
<body>
<img src="1.jpg">
</body>
请告诉我最简单的方法。
感谢我亲爱的朋友。
我在此网站中找到了类似的问题。但我找不到完整的答案。
如果此问题重复，很抱歉
请原谅我糟糕的英语运用。
推荐答案
可以使用jQuery的悬停事件，传入onenter和onout方法。在Enter时，您可以调用并设置时间间隔以增加映像的编号，而在Out时，您希望通过清除时间间隔来停止它。
<!DOCTYPE html>
<html>
<head>
<title>image</title>
</head>
<body>
<img id="img" src="1.jpg" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var interval = null;
function changeImage(){
var nextNum = parseInt($('#img').attr('src').replace('.jpg',''), 10) + 1;
// If you want it to repeat back to 1 after 5
nextNum = nextNum > 5 ? 1 : nextNum;
$('#img').attr('src', nextNum+'.jpg');
}
$('#img').hover(
function(){
// Call change Image every 50ms
interval = setInterval(changeImage, 50);
changeImage();
},
function(){
// Stop the call
interval && clearInterval(interval);
}
);
</script>
</body>
</html>
这篇关于当鼠标悬停在图像上时，幻灯片将作为gif图像启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
