<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<div id="div1">
<img src="../images/ps_1612071536089019860.jpg" class="photo" style="display:none;">
</div>
</div>
<script>
(function(){
var div1 = $("#div1");
var photo = $(".photo");
var count = 0;
var photos = ["../images/ps_1612071536089019860.jpg","../images/ps_1612071538160875338.jpg","../images/ps_1612071539482424396.jpg"]
return change = {
div1 : div1, photo : photo, count : count, photos : photos
};
}
)();
//初次动画效果
change.photo.show(2000,clear);
//设置周期
window.setInterval(run,3000);
//清除display:none的style
function clear() {
change.photo.attr("style","");
}
//周期函数
function run() {
change.count++;
if(change.count == change.photos.length){
change.count = 0;
}
//改src和style属性
change.photo.attr({
"src":change.photos[change.count],
"style":"display:none"
});
change.photo.show(2000,clear);
}
</script>
</body>
</html>
注意:style是属性,不能change.photo.css(“style”,“display:none”);或change.photo.css(“style”,"");用数组来存播放的图片地址