Question

Noob在这里。我正在为一个学校项目建立一个网站。我正在尝试创建一个具有旋转图像主页的网站。我试图这样做，当var sec达到一定数量时，它会将图像更改为不同的图像。问题是它似乎没有改变图像。

这是JFiddle：Fiddle

该项目还规定我不能使用外部代码，这意味着我不能使用jQuery。有人会告诉我如何将代码转换为vanilla javascript。

最后一个问题，在外部将javascript代码链接到HTML时。我会这样做：<link type="text/javascript" href="/js/js.js">。

谢谢你：）

Answer 1

你可以这样做（但你需要jquery）：

<script>
   $("image id or class or name").attr('src','image's src');
</script>

希望它能奏效。让我知道

Answer 2

有一些错别字，我更新了你的小提琴： http://jsfiddle.net/4yhas10z/9/

数组从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_photo"中有一个拼写错误，它是id="hml_photo"。

您不应在标记中使用window.（在这种情况下，您不应在标记中使用任何内容，因为您在文档准备就绪时运行start函数。）

而且 - 这只适用于jsFiddle - 你忘了在jsFiddle Javascript菜单中加载jQuery。

Answer 3

您可以使用DOMContentLoaded替换jQuery ready。

为了解决photo_current数组的元素，可以使用模运算：

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

考虑避免全局变量。

var timer;
var sec = 1;
var timeField;
var photo;
var photo_current = ["http://www.drodd.com/images15/1-15.jpg","http://www.drodd.com/images15/2-23.jpg","http://www.drodd.com/images15/3-12.jpg"];

function update() {
    sec++;
    timeField.innerHTML = sec;

    if (sec == 30) sec = 0;

}

function changeImage() {
    var i = sec % 3;
    photo.src = photo_current[i];
}

function start() {
    timer = setInterval(function() {
        update()
        changeImage()
    }, 1000);
}
document.addEventListener('DOMContentLoaded', function(e) {
    timeField = document.getElementById("time");
    photo = document.getElementById("hml_photo");
    timeField.innerHTML = "1";

    start();
})

#hml_photo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div id="time"><span>1</span></div>

<img src="http://www.drodd.com/images15/1-15.jpg" id="hml_photo">

Answer 4

这是一个纯粹的Javascript示例：

HTML：

<img src="first_image.jpg" alt="blablabla"/>

的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>

要将JS文件链接到HTML文件，您需要使用：

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

使用JavaScript

4 个答案: