正文
前端代码控制gif图暂停与播放的坑
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
废话不说，先看效果.....
方案一、方案二效果：
方案三效果：
<!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
