这里采用4张图片做效果展示：
利用到鼠标事件：
mouseenter（）鼠标经过事件（鼠标经过图片停止计时）
mouseleave（）鼠标离开事件 （鼠标离开图片继续计时）
<html>
<head>
<meta charset="UTF-8">
<title></title>
//导入jQuery
<script src="../js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<img id="img" src="../img/a.jpg" style=" 600px; height: 480px; margin-left: 300px;"/>
<script type="text/javascript">
//将4张图片存放在数组中
var image_list = ["../img/a.jpg","../img/b.jpg","../img/c.jpg","../img/d.jpg"]
var i = 0
$("#img").mouseleave(
function () {
//计时器，每隔3秒更换图片
Inter=setInterval(
function () {
//判断获取索引
if (i > 2) {
i = 0
} else{
i++
}
console.log(i)
var img = image_list[i]
//利用attr属性来修改标签的src属性（路径）
$("#img").attr("src",img)
},
3000
)
})
$("#img").mouseenter(
function () {
//清除计时器
clearInterval(Inter);
}
)
</script>
</body>
</html>
