如何使用CSS-Grid和javascript制作圖像幻燈片

Question

我正在嘗試對圖像進行幻燈片放映。 但這似乎不起作用，檢查javascript時沒有出現任何錯誤。 不知道我在做什么錯

 $( document ).ready(function() { $('.work').scroll(function() { var $this= $('h2'); $('.image').each(function () { var hT = $(this).offset().top, hH = $('h2').outerHeight(), wH = $('.work').height(), wS = $this.scrollTop(); console.log((hT-wH) , wS); if (wS > (hT+hH-wH)){ $('#count').text($(this).data('index')); } }); }); }); function smallscreen() { if (window.innerWidth < 959) {var workSlide = document.querySelector('.work'); var sliderImages = document.querySelectorAll('.work h2'); var prevButton = document.querySelector('.prev'); var nextButton = document.querySelector('.next'); var counter = 1; const size = sliderImages[0].clientWidth; workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; nextButton.addEventListener('click', function next() { if (counter >= sliderImages.length - 1) return; workSlide.style.transition = "transform 0.4s ease-in-out"; counter++; workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; }); prevButton.addEventListener('click', function prev() { if (counter <=0) return; workSlide.style.transition = "transform 0.4s ease-in-out"; counter--; workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; }); workSlide.addEventListener('transitionend',function loopin() { if (sliderImages[counter].class === 'clonelast') { workSlide.style.transition = "none"; counter = workSlide.length -2; } if (sliderImages[counter].class === 'clonefirst') { workSlide.style.transition = "none"; counter = workSlide.length -2; } }); } } window.onload = window.resize = smallscreen;

 @media only screen and (max-width: 959px) /*and (orientation:portrait)*/ { html,body { max-width: 100%; height: 100%; } .main{ display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; grid-gap: 1.5em; } .header { grid-column: 1fr; display: grid; grid-template-columns: 1fr; justify-content: center; grid-row: 1; z-index: 2; width: 100vw; height: 60px; } .header h3 { display: none; } .logo { grid-column: 1; max-width: 100%; display: grid; justify-items: center; } .logo embed{ display: block; margin: auto; max-width: 50%; height: auto; } .body { grid-row: 2/3; display: grid; grid-gap: 1.5em; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; margin: 0; padding: 0; z-index: 1; } .about{ max-width: 100vw; } h1 { font-family: 'DM Sans', sans-serif, Arial, Helvetica; font-size: 13.5pt; line-height: 22pt; font-weight: 500; color: #000000; } .work { grid-row: 2 / 4; grid-column: 1; display: flex; width: 100%; } .image > img{ max-width: 100vw; height: auto; } .buttons { grid-row: 2 / 4; grid-column: 1; align-self: center; padding: 0.75em; display: grid; grid-template-columns: 1fr 1fr; transition: 0.5s ease 0s; z-index: 4; width: 100vw; } .prev { justify-self: start; } .next { justify-self: end; } button { background: none; color: inherit; border: none; font: inherit; cursor: pointer; outline: inherit; display: flex; } .buttons :hover { color: white; } .footer { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; z-index: 3; min-height: 80px; grid-row: 3; text-align: center; max-width: 100vw; } .phone { grid-row: 2; align-self: center; justify-self: center; } .media { list-style-type: none; display: flex; justify-content: space-between; padding: 1em 0 0; grid-row: 1; padding-bottom: 1em; } li > a { text-decoration: none; color: black; } li > a:hover { font-weight: 800; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="CSS/styles.css"> <title>DesignLover-Question</title> </head> <body> <div class="main"> <div class="header"> <div class="logo"> <a href="https://www.walumozagba.com"> <embed src="https://collartocuff.files.wordpress.com/2010/01/chanel-logo-png-image-e1512737281632.png" alt="logo" width="500px"> </a> </div> <h3><span id="count">1</span>/17</h3> </div> <div class="body"> <div class="about"> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <a href="mailto:info@walumozagba.com">pariatur</a>. <br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1> </div> <div class="work"> <h2 class="image" data-index="0"></h2> <h2 class="image clonefirst" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image clonelast" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="2"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="3"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="4"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="5"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="6"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="7"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="8"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="9"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="10"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="11"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="12"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="13"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="14"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="15"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="16"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> <h2 class="image" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2> </div> <div class="buttons"> <button class="prev">PREV</button> <button class="next">NEXT</button> </div> </div> <div class="footer"> <div class="phone"> <p>+31 123 12 12 12</p> </div> <ul class="media"> <li><a href="https://www.behance.net/walum" target="_blank">Behance</a></li> <li><a href="https://www.facebook.com/itswalu/" target="_blank">Facebook</a></li> <li><a href="https://www.instagram.com/walumozagba/" target="_blank">Instagram</a></li> <li><a href="mailto:info@walumozagba.com">Email</a></li> </ul> </div> </div> <script src="JS/scriptscroll.js" type="text/javascript"></script> </body> </html>

Answer 1

您需要轉換.work的元素，而不是.work本身。

這是圖像輪播的一個小版本：
（也可用作JSFiddle ）

 class Slider { constructor(el) { this.el = el; this.activeIndex = 0; this.numItems = this.el.children().length; // automatically advance slider this.interval = setInterval(() => this.next(), 5000); } prev() { this.activeIndex--; if(this.activeIndex < 0) this.activeIndex = this.numItems - 1; this.updateDom(); } next() { this.activeIndex++; if(this.activeIndex >= this.numItems) this.activeIndex = 0; this.updateDom(); } updateDom() { this.el.children().css('transform', `translateX(-${this.activeIndex}00%)`) } } $(() => { let slider = new Slider($(".work")); $(".prev").click(() => slider.prev()); $(".next").click(() => slider.next()); });

 .work { /* Specify the size of the image box (can be in any unit you want)*/ width: 500px; height: 300px; overflow: hidden; display: flex; } img { width: 100%; height: 100%; transition: transform 0.5s ease; will-change: transform; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="work"> <img src="https://picsum.photos/500/300?1"> <img src="https://picsum.photos/500/300?2"> <img src="https://picsum.photos/500/300?3"> <img src="https://picsum.photos/500/300?4"> <img src="https://picsum.photos/500/300?5"> </div> <button type="button" class="prev"> PREV </button> <button type="button" class="next"> NEXT </button>

對於生產用途，我建議盡管使用現有的庫。
僅舉幾例：

編輯：
繼承人的JsFiddle與您的代碼。

如何使用CSS-Grid和javascript制作圖像幻燈片

問題描述

1 個解決方案

解決方案1
0 已采納 2019-08-16 18:57:34

如何使用CSS-Grid和javascript制作圖像幻燈片

問題描述

1 個解決方案

解決方案1 0 已采納 2019-08-16 18:57:34

解決方案1
0 已采納 2019-08-16 18:57:34