时间戳

首页 > 解决方案 > 图像 src 不使用 javascript 更改

javascript - 图像 src 不使用 javascript 更改

问题描述

我已经为 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;
}

帮我

标签： javascriptjqueryhtmlcssgoogle-web-designer

解决方案

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

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

简单地说，getElementByClass是一个不存在的功能。对象上有一个可以使用的getElementsByClassName功能。document

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

因此，这是您可以在myTimer函数中使用的代码：

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

推荐阅读