Question

这是我到目前为止所拥有的。我可以将图像保存在容器中，但箭头不起作用。

我需要帮助Jquery部分并使图像自己循环运行，但也允许点击箭头来更改图像。

＆＃13;

  /*HEADER SECTION allwork*/

#container {
  width: 1200px;
  height: 628px;
  border: 0px solid black;
  margin: 0 auto;
  position: relative;
}

#container>img {
  width: 100% height: 100%;
  position: absolute;
  #container>.btn1 {
    position: absolute;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 15px;
    top: 150px;
    background: #2ecc71;
    color: white;
    font-size: 30px;
  }
  #container>#btn1:hover {
    box-shadow: 10px 0px 20px 0px #2ecc71;
  }
  #container>#btn1:hover {
    box-shadow: 10px 0px 20px 0px #2ecc71;
  }
  #container>#btn1 {
    position: relative;
    float: right;
  }

＆＃13;

<!DOCTYPE html>

<html lang="en">

<head>
  <meta name 'viewport' content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <meta Charset='uft-8'>
  <link rel='shortcut icon' href="images/favicon.png">
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <div id="head">

    <div class="header">
      <img class="logo" src="images/LOGO.png" alt="logo" />

      <ul>
        <li><a class="navbar" href="index.hmtl">About</a></li>
        <li><a class="navbar" href="resume.hmtl">Resume</a></li>
        <li><a class="navbar" href="all work.hmtl">All Work</a></li>
      </ul>
    </div>

  </div>

  <div id="container">
    <img class="slides" src="images/overview.png">
    <img class="slides" src="images/construction.png">

    <button class="btn1" onclick="plusDivs(-1)">&#10094;</button>
    <button class="btn2" onclick="plusDivs(+1)">&#10095;</button>
  </div>



  <script src="jquery.js"></script>
  <script src="script.js"></script>

</body>

</html>

＆＃13;

Answer 1

我建议你浏览一下

https://www.w3schools.com/howto/howto_js_slideshow.asp

幻灯片显然被称为Carousel。您还可以查看具有内置轮播支持的bootstrap框架

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Answer 2

以下是javascript代码：

<script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
     }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("slides");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";  
      }
     x[slideIndex-1].style.display = "block";  
   }
</script>

我想在我的网站上添加幻灯片。我使用html，css，并想使用jquery。如何创建响应式图像幻灯片

2 个答案: