我正在尝试学习如何为已设置计划的所列图像添加下一个和上一个按钮,但我不知道为什么它不起作用。我尝试按照这里列出的w3schools的教程进行操作 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_next_prev
我看过很多有关使用JavaScript的幻灯片项目的教程,但没有帮助。我想让我看起来像是为图像的每4个水平行添加一个“上一个”和“下一个”按钮(共16个图像),但是经过多次尝试后,我仍然无法正常工作。我是一个初学者,想边走边学,我想知道是否有人可以帮助我。谢谢!
HTML
<!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">« Previous</a>
<a href="#" class="next">Next »</a>
<a href="#" class="previous round">‹</a>
<a href="#" class="next round">›</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>© 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>
CSS
* {
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;
}
此处列出了Codepen以查看我的代码 https://codepen.io/freedom1060/pen/VwaKEaJ
答案 0 :(得分:1)
要回答您的问题,为什么按钮不起作用:
如果您打算使用JavaScript / jQuery使其正常工作,那是因为没有代码“监视”“上一个”的“ pipenv issue 1050 feature request”,“下一个”和click (即更改当前页面中图像的src
图像路径)以显示不同的图像
如果您打算使用基础知识并希望使用纯HTML来工作,则可以有多个HTML页面,每个页面最多包含16张图片,且图片的路径为src
,并具有在每个页面中进行硬编码的HTML页面的路径,例如<a href="page0.html" class="previous">Previous</a>
<a href="page2.html" class="next">Next</a>
一个旁注,注意到您的代码中有两个<h1>
,但这不是最佳实践,请参阅manipulating the HTML DOM
您说过自己想边走边学,但是尝试一些更有系统的事情可以帮助您避免遇到这种情况。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#Usage_notes似乎是一个很棒的地方,否则您也可以在Coursera,Udacity,edX等上找到免费的HTML / CSS / JavaScript课程。
答案 1 :(得分:0)
希望我能理解您的问题。使用自定义代码解决此类问题可能会非常耗时。幸运的是,这里有大量出色的JQuery插件可以提供解决方案。大多数具有此类功能的网站将永远不会使用自定义代码,而会使用图片滑块。您可以通过使用这些来实现您想要的。肯·惠勒(Ken Wheeler)的Checkout Slick Slider-https://kenwheeler.github.io/slick/