在html里如何利用JavaScript显示动图的效果
先是空白图片，然后数字图片依次显示<html><head><title></title></head><body><center><imgid=picsrc="pic_1...
先是空白图片，然后数字图片依次显示
<html>
<head><title></title></head>
<body>
<center>
<img id=pic src="pic_1.png"></img><br>
<script>
//var i=0;
function f(){
i++;
if(i>6) i=0;
document.getElementById('d1').style.backgroundPosition='left '+(-1*i*20)+'px';
document.getElementById('pic').src='pic_'+i+'.png';
}
window.setInterval(f, 1000);
//animate();
</script>
<form>
<input type="button" value="Start" onClick="animate();"></input>
<input type="button" value="Stop" onClick=""></input>
</form>
</center>
</body>
</html> 展开
<html>
<head><title></title></head>
<body>
<center>
<img id=pic src="pic_1.png"></img><br>
<script>
//var i=0;
function f(){
i++;
if(i>6) i=0;
document.getElementById('d1').style.backgroundPosition='left '+(-1*i*20)+'px';
document.getElementById('pic').src='pic_'+i+'.png';
}
window.setInterval(f, 1000);
//animate();
</script>
<form>
<input type="button" value="Start" onClick="animate();"></input>
<input type="button" value="Stop" onClick=""></input>
</form>
</center>
</body>
</html> 展开
展开全部
单张背景图方案(纵排):
<div id="d1" style="background: #ffffff url('numpic.jpg') no-repeat scroll left top; width:50px; height:20px;"></div>
七张图片切换方案:
<img id="d2" src="numpic_0.jpg" width="50" height="20" />
<script type="text/javascript">
var i=0;
function f(){
i++;
if(i>6) i=0;
document.getElementById('d1').style.backgroundPosition='left '+(-1*i*20)+'px';
document.getElementById('d2').src='numpic_'+i+'.jpg';
}
window.setInterval(f, 1000); //每秒切换
</script>
更多追问追答
追问
能帮我写一个完整的html嘛，我再加分
追答
已经很完整了,你自己补一下图片.你也可以把以上代码复制到任意一个网页的body段中,这样就行了.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
HTML部分：
<div id="ShowImg">
<img id="img" src="可以给个默认地址" />
<ul id="Num">
<li imgsrc="">1</li>
<li imgsrc="">2</li>
<li imgsrc="">3</li>
<li imgsrc="">4</li>
<li imgsrc="">5</li>
<li imgsrc="">6</li>
<li imgsrc="">7</li>
</ul>
</div>
JS部分：
首先确定你引入了JQuery的框架，然后在Script标签内加入以下代码
$(function(){
$("li","#Num").each(
$(this).click(function(){
$("#img").attr("src",$(this).imgsrc);
});
);
});
说明：
你提问的方式没给DOM结构，没说是动态的还是静态的，这种方式很笨的，一般都是异步获取图片个数，循环输出图片数字标签，结构也各有不同，我这是写了个简单的，没有验证，不知道有没有错，你可以试试。上面LI标签里的imgsrc属性是我自己定义的，里面存放你点击之后要换成的那个图片的地址
<div id="ShowImg">
<img id="img" src="可以给个默认地址" />
<ul id="Num">
<li imgsrc="">1</li>
<li imgsrc="">2</li>
<li imgsrc="">3</li>
<li imgsrc="">4</li>
<li imgsrc="">5</li>
<li imgsrc="">6</li>
<li imgsrc="">7</li>
</ul>
</div>
JS部分：
首先确定你引入了JQuery的框架，然后在Script标签内加入以下代码
$(function(){
$("li","#Num").each(
$(this).click(function(){
$("#img").attr("src",$(this).imgsrc);
});
);
});
说明：
你提问的方式没给DOM结构，没说是动态的还是静态的，这种方式很笨的，一般都是异步获取图片个数，循环输出图片数字标签，结构也各有不同，我这是写了个简单的，没有验证，不知道有没有错，你可以试试。上面LI标签里的imgsrc属性是我自己定义的，里面存放你点击之后要换成的那个图片的地址
更多追问追答
追问
你写的好复杂，什么叫引入框架，这是高中作业，就普通的html，在里面用一些JavaScript，让图片不断循环就好，应该是用loop什么的
追答
我说的是页面点击数字切换图片，你要的是什么我不知道
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
settime() 把元素的图片地址不停更换即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用jQuery框架实现
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把你需要添加的html发给我，1810095497@qq.com
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
