HTML：

Question

作为我工作中项目的一部分，我正在尝试做一个非常简单的图像滑块。

我制作了一个应该制作幻灯片的功能，但问题是当我点击箭头时，它没有将图像更改为下一个/上一个。

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Simple Photo Slider</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>

  <div class="container">


      <!--Left Arrow-->
      <div class="arrow">
          <a href="#" onclick="slide(-1)">
              <span class="left"></span>
          </a> 
      </div>

      <!--Image-->
      <img src="images/img1.jpg" class="img" />

      <!--Right Arrow-->
      <div class="arrow">
          <a href="#" onclick="slide(1)">
              <span class="right"></span>
          </a>
      </div>



  </div> 
  <script src="js/index.js"></script>    
</body>
</html>

JS：

var imageCount = 1;
var total = 5;
function slide(x)
{
    var image = document.getElementsByClassName('img');
    imageCount += x;
    if (imageCount > total || imageCount < 1)
        imageCount = 1;
    image.src = "images/img" + imageCount + ".jpg";
}

CSS：

.container {
    width:700px;
    height:600px;
    margin: 20px auto;
    position:relative;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  position:absolute;
  top:40%;
  width:3em;
}



a {
  display: inline-block;
  border-radius: 50%;
  text-align:center;
}

a:hover .left, a:hover .top, a:hover .bottom, a:hover .right{
  border: 0.3em solid #e74c3c;
}

a:hover .left:after, a:hover .top:after, a:hover .bottom:after, a:hover .right:after {
  border-top: 0.3em solid #e74c3c;
  border-right: 0.3em solid #e74c3c;
}

.left {
    display: inline-block;
    width: 3em;
    height: 3em;
    border: 0.3em solid #333;
    border-radius: 50%;
    /* margin-right: -3.5em; */
    /* margin-left: 0em; */
    /* margin: auto 0; */
}

.left:after {
    content: '';
    display: inline-block;
    margin-top: 0.7em;
    margin-left: 0.6em;
    width: 1.4em;
    height: 1.4em;
    border-top: 0.3em solid #333;
    border-right: 0.3em solid #333;
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.right {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: 0.3em solid #333;
  border-radius: 50%;
  margin-left: 40.1em;
}

.right:after {
  content: '';
  display: inline-block;
  margin-top: 0.7em;
  margin-left: -0.6em;
  width: 1.4em;
  height: 1.4em;
  border-top: 0.3em solid #333;
  border-right: 0.3em solid #333;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


.img {
    height:500px;
    width:500px;
    display:inline-block;
    position:absolute;
    left:14%;

}

我怎样才能让它发挥作用？我做错了什么？

Answer 1

document.getElementsByClassName返回一个数组，所以你应该写：

image[0].src = "images/img" + imageCount + ".jpg";

CodePen

Answer 2

将此行更改为

var image = document.getElementsByClassName('img')[0];

当document.getElementsByClassName('img')返回一个集合时，您需要引用此集合中的第一个项目，该项目使用[0]完成。此集合类似于数组，但存在一些差异 - see here if interested

或者，由于html页面只能包含一个ID，因此如果您将图片的id设置为img，则可以执行以下操作：

 <img src="images/img1.jpg" id="img" />

你可以做到

var image = document.getElementById('img');

我的href onclick事件无效

HTML：

JS：

CSS：

2 个答案:

CodePen