废话不说,先看效果.....
方案一、方案二效果:
方案三效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css"> img{ display: block; } </style>
<body>
<img src="222.jpg"/> <div> <img class="img2" src="222.jpg"/> </div>
</body>
</html>
<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
方法一:display:none/block;失败(gif图再次显示时动画接着上次的动画)
var i=0;
var img=document.querySelector('.img2')
setInterval(function () {
i++
if(i%2==0){
img.style.display='none'
}else{
img.style.display='block'
}
},2000)
方案二:remove/append DOM节点 失败,效果同方案一(gif图再次显示时动画接着上次的动画)
var i=0;
var htmlimg='<img class="img2" src="222.jpg"/>'
setInterval(function () {
i++
if(i%2==0){
$('.img2').remove()
}else{
$('#aaa').append(htmlimg)
}
},2000)
方案三:一张图交替替换图片地址:成功
var i=0;
setInterval(function () {
i++
if(i%2==0){
$('.img2').attr('src','222.jpg')
}else{
$('.img2').attr('src','333.jpg')
}
},2000)
</script>
原创,转载请注明出处:
http://www.cnblogs.com/chunlei36