是否可以通过分页更改 css 网格的内容（图像）？
[英]Is it possible to change the content (images) of a css grid via pagination?
问题描述
const galleryItems=document.querySelector(".gallery-items").children; const prev=document.querySelector(".prev"); const next=document.querySelector(".next"); const page=document.querySelector(".page-num") const maxItem=8; let index=1; const pagination=Math.ceil(galleryItems.length/maxItem); console.log(pagination) prev.addEventListener("click", function(){ index--; check(); showItems(); }); next.addEventListener("click", function(){ index++; check(); showItems(); }); function check(){ if(index==pagination){ next.classList.add("disabled") } else{ next.classList.remove("disabled") } if(index==1){ prev.classList.add("disabled"); } else{ prev.classList.remove("disabled"); } } function showItems(){ for(let i=0; i<galleryItems.length; i++){ galleryItems[i].classList.remove("show"); galleryItems[i].classList.add("hide"); if(i>=(index*maxItem)-maxItem && i<index*maxItem ){ galleryItems[i].classList.remove("hide"); galleryItems[i].classList.add("show"); } page.innerHTML=index; } } window.onload=showItems(); showItems(); check();
body{ margin: 0; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background: #efefef; } *{ box-sizing: border-box; }.container{ max-width: 1000px; margin: auto; }.gallery.title h1 { font-size: 36px; margin: 0 0 30px; color: #000000; text-align: center; }.gallery.gallery-items.item{ float: left; width: 25%; position: relative; }.gallery.gallery-items.item.hide{ display: none; }.gallery.gallery-items.item.show{ display: block; } @keyframes show{ 0%{ opacity: 0; transform: scale(0.9); } 100%{ opacity: 1; transform: scale(1); } }.gallery.gallery-items.item img{ width: 100%; display: block; }.gallery.gallery-items.item.caption{ position: absolute; left: 0; bottom: 0; background-color: rgba(0,0,0,.5); padding: 10px; width: 100%; color:#ffffff; text-align: center; }.gallery.pagination{ width: 100%; float: left; padding: 15px; text-align: center; }.gallery.pagination div { display: inline-block; margin: 0 10px; }.gallery.pagination.page { color: gray; }.gallery.pagination.prev, .gallery.pagination.next{ color: #000; border: 1px solid #000; font-size: 15px; padding: 7px 15px; cursor: pointer; }.gallery.pagination.prev.disabled, .gallery.pagination.next.disabled { border-color: gray; color: gray; pointer-events: none; } img{ height: 360px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="irgendetwas.css"> </head> <body> <section class="gallery"> <div class="container"> <div class="title"> Gallery </div> <div class="gallery-items"> <div class="item"> <img src="../Images/cover.jpg" > <div class="caption"> 1</div> </div> <div class="item"> <img src="../Images/cover1.jpg" > <div class="caption"> 2</div> </div> <div class="item"> <img src="../Images/cover2.jpg" > <div class="caption"> 3</div> </div> <div class="item"> <img src="../Images/cover3.jpg" > <div class="caption"> 4</div> </div> <div class="item"> <img src="../Images/cover4.jpg" > <div class="caption"> 5</div> </div> <div class="item"> <img src="../Images/cover5.jpg" > <div class="caption"> 6</div> </div> <div class="item"> <img src="../Images/cover6.jpg" > <div class="caption"> 7</div> </div> <div class="item"> <img src="../Images/cover7.jpg" > <div class="caption"> 8</div> </div> <div class="item"> <img src="../Images/cover8.jpg" > <div class="caption"> 9</div> </div> <div class="item"> <img src="../Images/cover9.jpg" > <div class="caption"> 10</div> </div> <div class="item"> <img src="../Images/cover10.jpg" > <div class="caption"> 11</div> </div> <div class="item"> <img src="../Images/cover11.jpg" > <div class="caption"> 12</div> </div> <div class="item"> <img src="../Images/cover12.jpg" > <div class="caption"> 13</div> </div> <div class="item"> <img src="../Images/cover13.jpg" > <div class="caption"> 14</div> </div> <div class="item"> <img src="../Images/Drawings/drawing1.jpg" > <div class="caption"> 15</div> </div> <div class="item"> <img src="../Images/Drawings/drawing2.jpg" > <div class="caption"> 16</div> </div> <div class="item"> <img src="../Images/Drawings/drawing3.jpg" > <div class="caption"> 17</div> </div> <div class="item"> <img src="../Images/Drawings/drawing4.jpg" > <div class="caption"> 18</div> </div> <div class="item"> <img src="../Images/Drawings/drawing5.jpg" > <div class="caption"> 19</div> </div> <div class="item"> <img src="../Images/Drawings/drawing6.jpg" > <div class="caption"> 20</div> </div> </div> <div class="pagination"> <div class="prev">Prev</div> <div class="page">Page <span class="page-num"></span> </div> <div class="next">Next</div> </div> </div> </section> <script src="irgendetwas.js"></script> </body> </html>
我有多个使用 css 网格完成的图像库。 我尝试使用 css 网格和分页栏制作一个图片库，当用户单击分页栏时，其中的内容（图像）将被不同的图像替换/更改。 我没能成功。 为了形象化，我的意思是，这是一个没有 css 网格的不同源代码。 有一定的原因，为什么我想这样尝试。
1 个解决方案
解决方案1
0 2021-12-03 18:35:27
通常你会在服务器端实现分页，但如果你只想使用 JavaScript 来实现，方法是将所有分页图像添加到同一个位置，然后隐藏和显示它们
<div class="item">
<span class="prev"><img ... /></span>
<span class="now"><img ... /></span>
<span class="next"><img ... /></span>
<div> ... </div>
</div>
以及当您要切换要显示的图像时（示例显示.prevs）：
document.querySelectorAll("span").forEach(function(elem) {
elem.style.display = "none";
});
document.querySelectorAll(".prev").forEach(function(elem)
{
elem.style.display = "inline";
});
我已将图像放在跨度中，因为我认为您无法使用 style.display = "none"; 隐藏图像 （我可能是错的）
是否可以更改struts2-jquery-grid-tags的css颜色
[英]Is it possible to change css color of struts2-jquery-grid-tags
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.