Javascript 在计时器上转换图像

首先，这是一个学校项目，要求不能使用外部库（如JQuery），所以只能使用普通的html、css和javascript。 我正在尝试创建一个图像，它将在x秒后转换为另一个图像

$（文档）.ready（函数（）{
无功定时器；
var-sec=1；
var timeField=document.getElementById（“时间”）；
var photo=document.getElementById（“html_photo”）；
timeField.innerHTML=“1”；
var photo_电流=[”http://www.drodd.com/images15/1-15.jpg","http://www.drodd.com/images15/2-23.jpg","http://www.drodd.com/images15/3-12.jpg"];
函数更新（）{
sec++；
timeField.innerHTML=秒；
如果（秒=30）秒=0；
}
函数changeImage（）{
如果（秒=1）{
photo.src=photo_电流[1]；
}否则如果（秒=3）{
photo.src=photo_电流[2]；
}否则如果（秒=5）{
photo.src=photo_电流[3]；
}
}
函数start（）{
计时器=设置间隔（函数（）{
更新（）
changeImage（）
}, 1000);
}
start（）；
});

1.
您可以这样做（但需要jquery）：


$（“图像id或类或名称”）.attr（'src'，'image's src'）；

希望它能起作用。告诉我有一些打字错误，我更新了你的小提琴：

数组从0开始，而不是从表1开始

function changeImage() {
    if (sec == 1) {
      photo.src = photo_current[0];
    } else if (sec == 3) {
      photo.src = photo_current[1];
    } else if (sec == 5) {
      photo.src = photo_current[2];
    }
}

您在
id=“html\u photo”
中有一个输入错误，它是
id=“hml\u photo”

您不应该在标记中使用
窗口。
（在这种情况下，您不应该在标记中使用任何内容，因为您正在document ready上运行
start
函数）

而且-这只适用于jsFiddle-您忘记在jsFiddle Javascript菜单中加载jQuery。
您可以用ready替换jQuery

为了处理photo_current array的元素，可以使用模运算：

function changeImage() {
    var i = sec % 3;
    photo.src = photo_current[i];
}

考虑避免全局变量


var定时器；
var-sec=1；
var时间域；
var照片；
var photo_电流=[”http://www.drodd.com/images15/1-15.jpg","http://www.drodd.com/images15/2-23.jpg","http://www.drodd.com/images15/3-12.jpg"];
函数更新（）{
sec++；
timeField.innerHTML=秒；
如果（秒=30）秒=0；
}
函数changeImage（）{
var i=秒%3；
photo.src=photo_电流[i]；
}
函数start（）{
计时器=设置间隔（函数（）{
更新（）
changeImage（）
}, 1000);
}
document.addEventListener（'DOMContentLoaded'，函数（e）{
timeField=document.getElementById（“时间”）；
photo=document.getElementById（“hml_照片”）；
timeField.innerHTML=“1”；
start（）；
})
#hml#u照片{
位置：绝对位置；
最高：50%；
左：50%；
宽度：120px；
高度：120px；
裕度：-60px0-60px；
-webkit动画：旋转4s线性无限；
-moz动画：旋转4s线性无限；
动画：旋转4s线性无限；
}
@-moz关键帧旋转{100%{-moz变换：旋转（360度）；}
@-webkit关键帧旋转{100%{-webkit变换：旋转（360度）；}
@关键帧旋转{100%{-webkit变换：旋转（360度）；变换：旋转（360度）；}}
1
下面是一个纯Javascript示例：

HTML:



Javascript

<script>

 var image = document.getElementsByTagName('img')[0];
 var image_to_show = 0;
 var image_container = ['first_image.jpg','second_image.jpg','third_image.jpg'];    //Put all the images you want


setInterval(function(){

if(image_to_show >= image_container.length -1)      //Return to the first one
{
    image_to_show = 0;  
}
else
{
    image_to_show++;
}

    image.src = image_container[image_to_show];

  },3000);



 </script>


var image=document.getElementsByTagName（'img'）[0]；
var image_to_show=0；
var image_container=['first_image.jpg'，'second_image.jpg'，'third_image.jpg']//放上你想要的所有图片
setInterval（函数（）{
if（image\u to\u show>=image\u container.length-1）//返回到第一个
{
图像显示=0；
}
其他的
{
图像显示++；
}
image.src=image\u容器[image\u to\u show]；
},3000);

要将JS文件链接到HTML文件，您需要使用以下命令：

<script src="yourfile.js"></script>


Debug+显示代码。还要看一下CSS转换如果您不能使用jQuery，为什么要使用
$（document）.ready（）
？您的小提琴失败了，因为它找不到来自jQuery的
$
。看看如何使用我很抱歉这不起作用，因为我特别提到我不能使用jQuery:）
<script>

 var image = document.getElementsByTagName('img')[0];
 var image_to_show = 0;
 var image_container = ['first_image.jpg','second_image.jpg','third_image.jpg'];    //Put all the images you want


setInterval(function(){

if(image_to_show >= image_container.length -1)      //Return to the first one
{
    image_to_show = 0;  
}
else
{
    image_to_show++;
}

    image.src = image_container[image_to_show];

  },3000);



 </script>

<script src="yourfile.js"></script>