Question

HTML：非常简单，只需滑动带有按钮的幻灯片即可更改图像。

<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
  <li><button class="btns" id="btn1">Previous</button></li>
  <li><button class="btns" id="btn2">Next</button></li>
</ul>

CSS：我在这里不需要帮助，我对设计的了解不多。

#myslides {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#mylist,
li {
  display: inline-block;
  position: relative;
  top: -5px;
  left: -20px
}

.btns {
  height: 50px;
  width: 200px;
  background: #666666;
  color: white;
  font-size: 20px;
}

JQuery：我不知道我在做什么错。无法定义“ image”，因为它不是“ img”，所以为什么src更改不起作用？

$(docuent).ready(function() {
  var slide = $("#myslides");
  $("#btn2").click(function() {
    if (slide.attr("src") == "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg") {
      slide.attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
    }
  });
});

$(docuent).ready(function() {
  var slide = $("#myslides");
  $("#btn2").click(function() {
    if (slide.attr("src") == "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg") {
      slide.attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
    }
  });
});

#myslides {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#mylist,
li {
  display: inline-block;
  position: relative;
  top: -5px;
  left: -20px
}

.btns {
  height: 50px;
  width: 200px;
  background: #666666;
  color: white;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
  <li><button class="btns" id="btn1">Previous</button></li>
  <li><button class="btns" id="btn2">Next</button></li>
</ul>

Answer 1

您拼写错误的document。如果您正在寻找制作滑块的更具扩展性的方法，则可以尝试执行以下操作：

$(document).ready(function () {
  var visibleSlide = $("#myslides");
  var slideList = [
    "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg",
    "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg"
  ];
  var currentSlideIndex = 0;

  $("#btn1").click(function () {
    changeSlide('previous');
  });

  $("#btn2").click(function () {
    changeSlide('next');
  });

  function changeSlide(direction) {
    switch(direction) {
      case 'previous':
        if (currentSlideIndex > 0) {
          currentSlideIndex--;          
        }

        break;

      case 'next':
        if (currentSlideIndex < slideList.length - 1) {
          currentSlideIndex++;
        }

        break;

      default:
        // no-op
    }

    visibleSlide.attr('src', slideList[currentSlideIndex]);
  }

});

请参见CodePen。

如果您没有将jQuery加载到页面上，则将其添加到HTML的底部：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您的代码可以正常工作，但是您只需将$（docuent）更改为$（document）

听到您可以看到Click to see

$(document).ready(function() {

您像下面这样写

$(docuent).ready(function() {

如何使用JQuery的else / if语句更改图像src？

2 个答案: