Fatal编程技术网
  • html/
  • Html 上一个和下一个按钮？

Html 上一个和下一个按钮？

html css

Html 上一个和下一个按钮？,html,css,Html,Css,我正在尝试学习如何为列出的图片添加下一个和上一个按钮，我已经设置了计划，但我不知道为什么它不起作用。我试着按照这里列出的W3学校的教程进行学习 我看过很多关于使用JavaScript的幻灯片项目的教程，但都没有帮助。我希望我的图片看起来像是为每4行图片（总共16张图片）添加一个上一个和一个下一个按钮，但经过多次尝试后，我仍然无法让它工作。我是一个初学者，希望边走边学，我想知道是否有人能帮我。谢谢大家! HTML 此处列出了代码笔以查看我的代码 希望我能理解你的问题。使用自定义代码处理此类问题可

我正在尝试学习如何为列出的图片添加下一个和上一个按钮，我已经设置了计划，但我不知道为什么它不起作用。我试着按照这里列出的W3学校的教程进行学习

我看过很多关于使用JavaScript的幻灯片项目的教程，但都没有帮助。我希望我的图片看起来像是为每4行图片（总共16张图片）添加一个上一个和一个下一个按钮，但经过多次尝试后，我仍然无法让它工作。我是一个初学者，希望边走边学，我想知道是否有人能帮我。谢谢大家!

HTML

此处列出了代码笔以查看我的代码
希望我能理解你的问题。使用自定义代码处理此类问题可能非常耗时。幸运的是，有大量优秀的JQuery插件可以提供解决方案。大多数具有这种功能的网站永远不会使用自定义代码，他们会使用图像滑块。你可以通过使用这些工具来实现你想要的。签出Ken Wheeler的Slick Slider-

回答您的问题，为什么按钮不工作：

  • 如果您打算使用JavaScript/jQuery使其工作，那是因为没有代码“监视”“上一页”和“下一页”以及（即更改当前页面中图像的
    src
    路径）以显示不同的图像

  • 如果您想玩一些基本的东西，并且希望使用纯HTML来工作，那么您可以有多个HTML页面，每个页面最多包含16张图片，带有右
    src
    图像路径，并且每个页面中都有硬编码的HTML页面路径，类似这样的

请注意，代码中有两个
，这不是最佳做法，请参阅

你说你想边学边做，但尝试一些更系统的方法可能会帮助你避免陷入这样的情况。看起来是个很棒的地方，否则你也可以在Coursera、Udacity、edX等网站上找到免费的HTML/CSS/JavaScript课程。

谢谢你的评论。你知道我在哪里可以学习/阅读类似的文档吗？我发布的图片链接是我希望我的网站主要的外观。所有的文档都可以在我上面提供的链接上找到。其内容广泛，还包括多个示例感谢回复。假设我想用JS或JQuery做一个例子，让它看起来像这样，有没有像一个教程或文档我可以知道搜索什么？Idk这部分编码的名称 
<!DOCTYPE html>
<span id=HOME></span>
<html>


<link rel="stylesheet" href="assets/css.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

  

<nav>
  <ul>
    <li> <a href="#HOME">HOME</a></li>
    <li> <a href="#">ABOUT</a></li>
    <li> <a href="#myBtnContainer">PRODUCTS</a></li>
    <li> <a href="#">BLOG</a></li>
    <li> <a href="#">ABOUT</a></li>

  </ul>

</nav>


<!-- MAIN (Center website) -->
<div class="main">

<h1>test</h1>
<hr>

<h2>test title
</h2>
</span>
<img src="guy.png" alt="Italian Trulli">
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> All Products</button>
  <button class="btn" onclick="filterSelection('2')"> test2</button>
  <button class="btn" onclick="filterSelection('3')"> test 3</button>
  <button class="btn" onclick="filterSelection('4')"> test 4</button>
    <button class="btn" onclick="filterSelection('5')"> test 5</button>
      <button class="btn" onclick="filterSelection('6')"> test 6</button>
        <button class="btn" onclick="filterSelection('7')"> test 7</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column ">
    <div class="content">
      <img src="pic/1.jpg" alt="Mountains" style="width:100%">

    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/2.jpg" alt="Lights" style="width:100%">

    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/3.jpg" alt="Nature" style="width:100%">

    </div>
  </div>
  
  <div class="column 4">
    <div class="content">
      <img src="pic/4.jpg" alt="Car" style="width:100%">

    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/5.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/6.jpg" alt="Car" style="width:100%">
    </div>
  </div>

  <div class="column ">
    <div class="content">
      <img src="pic/7.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/8.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/9.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/10.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/11.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/12.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/13.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/14.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/15.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/16.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  
  <!---next and previous--->
  
    <a href="#" class="previous">&laquo; Previous</a>
<a href="#" class="next">Next &raquo;</a>

<a href="#" class="previous round">&#8249;</a>
<a href="#" class="next round">&#8250;</a>
    <!---next and previous--->
  
  
  <div class="column ">
    <div class="content">
    <img src="pic/17.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/18.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/19.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/20.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/21.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/22.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/23.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/24.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/25.jpg" alt="Car" style="width:100%">
    </div>
  </div>
  <div class="column ">
    <div class="content">
    <img src="pic/26.jpg" alt="Car" style="width:100%">
    </div>
    
    
  </div>
<!-- END GRID -->
  
</div>



  
  
<hr>
<h1>test</h1>
<footer> <small>&copy; Copyright 2020,  test</small> </footer> 
<!-- END MAIN -->
</div>

<script>
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

</body>
</html>

* {
  box-sizing: border-box;
}
.container-1{
  display:flex;

}

body {
  margin: 0;
  background-color: pink;
}

@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

a{
  text-decoration: none;
  color: black;

}
body,
html{
  width: 100%;
  height: 200vh;
  
}
nav{
  position: relative;
  width: 100%;
  height: 10$;
}

ul{
  padding:0;
  position: relative;
  top:50%;
  width: 100%;
  height: 50%;

  display: flex;
  justify-content: space-around;
  list-style-image: none;

}

/* Center website */
.main {

  max-width: 1000px;
  margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 90px;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
  
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  box-sizing: border-box;
  padding: 5px;
}

/* Create three equal columns that floats next to each other */
.column {
  text-align: center;
  float: left;
  width: 22%;
  display: none; /* Hide all elements by default */
  box-sizing: border-box;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}