使用 javascript 未更改图像源

Question

我已经在 CSS 中编写了这段用于选取框效果的代码，现在我正在使用 javascript 来更改图像，但即使代码是正确的，它也不起作用。请告诉我问题是什么。

我已经尝试了所有可能的代码并重新安排了代码，但还是不行。

HTML 文件

<!DOCTYPE html>
<html>
<head>

    <title>Marquee Effect</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, 
 initial-scale=1">
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/b 
 ootstrap.min.css">
    <link rel="stylesheet" type="text/css" 
href="main.css">



</head>
<body>
<div class="marquee">
    <img src = "2.jpg" class="img-responsive">
</div>
<script type="text/javascript">

function myTimer() {
    var divtag = document.getElementByClass("marquee");
    divtag.getElementByClass("img-responsive").src = 
"3.jpg";
   }

var fun = setInterval(myTimer, 12500); 

</script>

</body>

 </html>

css 文件

@-webkit-keyframes scroll{
    0% {
        -webkit-transform: translate(0,-120%);
    }
    50%{
        -webkit-transform: translate(0,50%);
        -webkit-transition-delay(1);
    }
    100% {
        -webkit-transform: translate(0,245%);
    }
}


.marquee{
    width:100%;
    height:100%;
    overflow: hidden;


}

.marquee img{
    float: right;
    width:40%;
    height:40%;
    position: relative;
    -webkit-animation:scroll 12s infinite linear;
    opacity: 0.7;
}

html, body{
  width:100%;
  height:100%;
  background-color: black;
  overflow:hidden;
}

帮帮我

Answer 1

如果您在浏览器中打开开发人员工具 (F12)，您将重复看到以下错误消息：

Uncaught TypeError: document.getElementByClass is not a function at myTimer

简单的说，getElementByClass是一个不存在的函数。您可以使用 document 对象上的 getElementsByClassName 函数。

但是，我建议使用 document.querySelector 函数，它使用 CSS 语法来 select 您想要的元素。它 return 是一个单一的元素节点。如果需要对多个元素进行操作，则使用它的对应函数 document.querySelectorAll 函数，它将 return 元素节点的集合。

下面是您可以在 myTimer 函数中使用的代码：

document.querySelector(".marquee .img-responsive").src="3.jpg"

使用 javascript 未更改图像源

Image src not changing using javascript

html

javascript

css

jquery

google-web-designer