关于js替换图片路径的问题
老师我想点击一次后，每隔100毫秒替换一次图片路径 可是我的图片有的不到80张，当不到80张时比如25张 它会先加载第26张不存在的图片路径(整个div会变为背景为白色)，然后再判断第26张是否存在，然后返回到第一张图片。 请问为什么会这样，怎样修改？
js代码》》
window.onload=function(){
var div = document.getElementById('div1');
var imgas = document.getElementById('tom');
var index = 0;
var path = new Image();
div.addEventListener('click',function(event){
// 获取id值
var name = event.target.id;
function add(){
index++;
if(index < 10){
// 保存图片地址
path.src = name+'/'+name+'_0'+index+'.jpg';
}
else if(index<=80 && path.width == 640){
// 保存图片地址
path.src = name+'/'+name+'_'+index+'.jpg';
}else if(path.width != 640){
// 保存图片地址
path.src = name+'/'+name+'_00'+'.jpg';
// 清除定时器
clearInterval(tatol);
index = 0;
}else{
// 清除定时器
clearInterval(tatol);
index = 0;
}
// 替换图片地址
imgas.src = path.src;
}
if(index<=80){
// 定时器
var tatol = setInterval(add,100);
}
},false);
}
HTML代码》》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2017/11/21会说话的汤姆猫</title>
<style>
h1{
text-align: center;
font-family: '楷体';
font-size: 30px;
color: red;
}
#div1{
/* border: 2px solid red; */
width: 500px;
height: 700px;
/*margin 设置外边距， auto居中 */
margin:50px auto;
/* 相对定位，为了让这个红框内的所有按钮，相对于红框做位置的调整 */
position: relative;
}
.img1 {
width:500px;
height:700px;
}
/* 根据ID找到头部的按钮 */
#knockout{
/* 宽度高度 */
width: 180px;
height: 220px;
/* 设置背景颜色 */
/* background-color: rebeccapurple; */
/* 坐位置的调整 */
/* 绝对定位 */
position: absolute;
/* 通过top，left，right，bottom样式调整位置*/
top: 130px;
right:160px;
}
#stomach{
width: 140px;
height: 200px;
/* background-color: royalblue; */
position: absolute;
bottom: 80px;
left:180px;
}
#foot_right{
width: 40px;
height: 50px;
/* background-color: black; */
position: absolute;
bottom:30px;
left:190px ;
}
#foot_left{
width: 40px;
height: 50px;
/* background-color:black; */
position: absolute;
bottom: 30px;
right: 200px;
}
#angry{
width: 60px;
height: 80px;
/* background-color: forestgreen; */
position: absolute;
bottom: 80px;
right: 110px;
}
/* 鸽子 */
#eat{
/* 吃鸽子 */
width: 50px;
height: 50px;
/* background-color: red; */
/* 背景图片 */
background-image:url("按钮/eat.png");
/* 背景图片的大小 */
background-size: 50px 50px;
position:absolute;
left: 50px;
top:320px;
}
/* */
#cymbal{
width: 50px;
height: 50px;
background-image: url("按钮/cymbal.png");
background-size: 50px 50px;
position: absolute;
right: 50px;
top:320px;
}
/* 牛奶 */
#drink{
width: 50px;
height: 50px;
background-image: url("按钮/drink.png");
background-size: 50px 50px;
position: absolute;
right: 50px;
top:400px;
}
#fart{
width: 50px;
height: 50px;
background-image: url("按钮/fart.png");
background-size: 50px 50px;
position: absolute;
left: 50px;
top:400px;
}
#pie{
width: 50px;
height: 50px;
background-image: url("按钮/pie.png");
background-size: 50px 50px;
position: absolute;
right: 50px;
top:250px;
}
#scratch{
width: 50px;
height: 50px;
background-image: url("按钮/scratch.png");
background-size: 50px 50px;
position: absolute;
left: 50px;
top:250px;
}
</style>
<script src="script.js"></script>
</head>
<body>
<h1>我家的汤姆猫</h1>
<div id="div1">
<img src="汤姆猫.jpg" alt="这是汤姆猫" title="" class="img1" id="tom">
<div id="knockout"></div>
<div id="stomach"></div>
<div id="foot_left"></div>
<div id="foot_right"></div>
<div id="angry"></div>
<div id="eat"></div>
<div id="cymbal"></div>
<div id="drink"></div>
<div id="fart"></div>
<div id="pie"></div>
<div id="scratch"></div>
</div>
</body>
</html>
正在回答
明白了你是想做个汤姆猫的效果哦。建议你这样，图片的条件不必限制在80张，你给每个动作按钮上都添加一个属性，用来标注该动作共有多少张图片，例如：
第一个动作，共有25张图片，就用data-num设置一个值为25的属性
在点击该动作按钮时，获取该按钮的id外，在获取一下data-num的值。在定时器的作用下，累加index，切换图片，直到index大于图片总量data-num的时候，清除定时器，index置为0，如下：
因为没有图片，没办法测试，所以只能给你这么一个思路，希望能帮助到你
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星