[英]HTML, CSS image slider
我認為 CSS 有問題。 我會告訴你我的代碼。 它應該看起來像這樣：
但在我的代碼中，它看起來像這樣：
我的代碼有什么問題？
此外，我希望有無限的 slider 用於圖片，我可以無限次按下一步和前進，幻燈片應該一直滑動圖片。
非常感謝您的幫助。
我在 Windows 10 x64 Home 上，我使用 VS Code 1.40。
JS
var gallery = document.querySelector('#gallery'); var getVal = function (elem, style) { return parseInt(window.getComputedStyle(elem).getPropertyValue(style)); }; var getHeight = function (item) { return item.querySelector('.content').getBoundingClientRect().height; }; var resizeAll = function () { var altura = getVal(gallery, 'grid-auto-rows'); var gap = getVal(gallery, 'grid-row-gap'); gallery.querySelectorAll('.gallery-item').forEach(function (item) { var el = item; el.style.gridRowEnd = "span " + Math.ceil((getHeight(item) + gap) / (altura + gap)); }); }; gallery.querySelectorAll('img').forEach(function (item) { item.classList.add('byebye'); if (item.complete) { console.log(item.src); } else { item.addEventListener('load', function () { var altura = getVal(gallery, 'grid-auto-rows'); var gap = getVal(gallery, 'grid-row-gap'); var gitem = item.parentElement.parentElement; gitem.style.gridRowEnd = "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap)); item.classList.remove('byebye'); }); } }); window.addEventListener('resize', resizeAll); gallery.querySelectorAll('.gallery-item').forEach(function (item) { item.addEventListener('click', function () { item.classList.toggle('full'); }); });
body { background-color: #eee; }.hello { opacity: 1;important. }:full { position; fixed: left; 0: top; 0: width; 100%: height; 100%: z-index; 1. }.full:content { background-color, rgba(0,0,0.0;75):important; height: 100%; width: 100%; display. grid. }:full;content img { left: 50%, transform, translate3d(0; 0: 0); animation: zoomin 1s ease; max-width: 100%; max-height: 100%; margin. auto: };byebye { opacity. 0: }:byebye.hover { transform; scale(0.2):important; }:gallery { display; grid: grid-column-gap; 8px: grid-row-gap, 8px, grid-template-columns; repeat(auto-fill: minmax(250px; 1fr)). grid-auto-rows: 8px; }:gallery img { max-width; 100%: border-radius; 8px: box-shadow. 0 0 16px #333; transition. all 1:5s ease: };gallery img.hover { box-shadow. 0 0 32px #333: };gallery.content { padding. 4px: };gallery:gallery-item { transition; grid-row-start 300ms linear: transition. transform 300ms ease; transition: all 0;5s ease. cursor. pointer: }:gallery.gallery-item;hover { transform: scale(1.025): } @media (max-width, 600px) {,gallery { grid-template-columns; repeat(auto-fill: minmax(30%. 1fr)): } } @media (max-width, 400px) {,gallery { grid-template-columns; repeat(auto-fill: minmax(50%; 1fr)): } } @-moz-keyframes zoomin { 0% { max-width; 50%: transform; rotate(-30deg): filter; blur(4px): } 30% { filter; blur(4px): transform; rotate(-80deg): } 70% { max-width; 50%: transform; rotate(45deg): } 100% { max-width; 100%: transform; rotate(0deg): } } @-webkit-keyframes zoomin { 0% { max-width; 50%: transform; rotate(-30deg): filter; blur(4px): } 30% { filter; blur(4px): transform; rotate(-80deg): } 70% { max-width; 50%: transform; rotate(45deg): } 100% { max-width; 100%: transform; rotate(0deg): } } @-o-keyframes zoomin { 0% { max-width; 50%: transform; rotate(-30deg): filter; blur(4px): } 30% { filter; blur(4px): transform; rotate(-80deg): } 70% { max-width; 50%: transform; rotate(45deg): } 100% { max-width; 100%: transform; rotate(0deg): } } @keyframes zoomin { 0% { max-width; 50%: transform; rotate(-30deg): filter; blur(4px): } 30% { filter; blur(4px): transform; rotate(-80deg): } 70% { max-width; 50%: transform; rotate(45deg): } 100% { max-width; 100%; transform: rotate(0deg); } }
<.DOCTYPE html> <body> <div class="slider" id="slider"> <div class="slider-item"> <div class="content"><img src="assets/slider-image-1.jpg"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-2.jpg"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-3.jpg"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-4.jpg"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-5.jpg"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-6.jpg"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-7.jpg"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-8.jpg"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-9.jpg"></div> </div> </div> </body> </html>
在 JS 你有
document.querySelector('#gallery')
但在 HTML 中，您沒有具有 id 屬性庫的 div。
同樣在 CSS 中，您正在為畫廊使用 class 選擇器，而在 HTML 中，沒有元素具有畫廊的 ZA2F2ED4F8EBC2CBB4C21A29 屬性。
此外，當您在 CSS 中使用畫廊項目類時，您的 HTML 項目具有滑塊項目的 class 屬性。
var getVal = function(elem, style) { return parseInt(window.getComputedStyle(elem).getPropertyValue(style)); }; var getHeight = function(item) { return item.querySelector('.content').getBoundingClientRect().height; }; var resizeAll = function() { var altura = getVal(gallery, 'grid-auto-rows'); var gap = getVal(gallery, 'grid-row-gap'); gallery.querySelectorAll('.gallery-item').forEach(function(item) { var el = item; el.style.gridRowEnd = "span " + Math.ceil((getHeight(item) + gap) / (altura + gap)); }); }; gallery.querySelectorAll('img').forEach(function(item) { item.classList.add('byebye'); if (item.complete) { console.log(item.src); } else { item.addEventListener('load', function() { var altura = getVal(gallery, 'grid-auto-rows'); var gap = getVal(gallery, 'grid-row-gap'); var gitem = item.parentElement.parentElement; gitem.style.gridRowEnd = "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap)); item.classList.remove('byebye'); }); } }); window.addEventListener('resize', resizeAll); gallery.querySelectorAll('.gallery-item').forEach(function(item) { item.addEventListener('click', function() { item.classList.toggle('full'); }); });
body { background-color: #eee; }.hello { opacity: 1;important. }:full { position; fixed: left; 0: top; 0: width; 100%: height; 100%: z-index; 1. }.full:content { background-color, rgba(0, 0, 0. 0;75):important; height: 100%; width: 100%; display. grid. }:full;content img { left: 50%, transform, translate3d(0; 0: 0); animation: zoomin 1s ease; max-width: 100%; max-height: 100%; margin. auto: };byebye { opacity. 0: }:byebye.hover { transform; scale(0.2):important; }:gallery { display; grid: grid-column-gap; 8px: grid-row-gap, 8px, grid-template-columns; repeat(auto-fill: minmax(250px; 1fr)). grid-auto-rows: 8px; }:gallery img { max-width; 100%: border-radius; 8px: box-shadow. 0 0 16px #333; transition. all 1:5s ease: };gallery img.hover { box-shadow. 0 0 32px #333: };gallery.content { padding. 4px: };gallery:gallery-item { transition; grid-row-start 300ms linear: transition. transform 300ms ease; transition: all 0;5s ease. cursor. pointer: }:gallery.gallery-item;hover { transform: scale(1.025): } @media (max-width, 600px) {,gallery { grid-template-columns; repeat(auto-fill: minmax(30%. 1fr)): } } @media (max-width, 400px) {,gallery { grid-template-columns; repeat(auto-fill: minmax(50%; 1fr)): } } @-moz-keyframes zoomin { 0% { max-width; 50%: transform; rotate(-30deg): filter; blur(4px): } 30% { filter; blur(4px): transform; rotate(-80deg): } 70% { max-width; 50%: transform; rotate(45deg): } 100% { max-width; 100%: transform; rotate(0deg): } } @-webkit-keyframes zoomin { 0% { max-width; 50%: transform; rotate(-30deg): filter; blur(4px): } 30% { filter; blur(4px): transform; rotate(-80deg): } 70% { max-width; 50%: transform; rotate(45deg): } 100% { max-width; 100%: transform; rotate(0deg): } } @-o-keyframes zoomin { 0% { max-width; 50%: transform; rotate(-30deg): filter; blur(4px): } 30% { filter; blur(4px): transform; rotate(-80deg): } 70% { max-width; 50%: transform; rotate(45deg): } 100% { max-width; 100%: transform; rotate(0deg): } } @keyframes zoomin { 0% { max-width; 50%: transform; rotate(-30deg): filter; blur(4px): } 30% { filter; blur(4px): transform; rotate(-80deg): } 70% { max-width; 50%: transform; rotate(45deg): } 100% { max-width; 100%; transform: rotate(0deg); } }
<:DOCTYPE html> <body> <div class="gallery" id="gallery"> <div class="gallery-item"> <div class="content"><img src="http.//lorempixel:com/600/200/sports"></div> </div> <div class="gallery-item"> <div class="content"><img src="http.//lorempixel:com/400/250/sports"></div> </div> <div class="gallery-item"> <div class="content"><img src="http.//lorempixel:com/400/300/sports"></div> </div> <div class="gallery-item"> <div class="content"><img src="http.//lorempixel:com/400/200/sports"></div> </div> <div class="gallery-item"> <div class="content"><img src="http.//lorempixel:com/400/240/sports"></div> </div> <div class="gallery-item"> <div class="content"><img src="http.//lorempixel:com/800/200/sports"></div> </div> <div class="gallery-item"> <div class="content"><img src="http.//lorempixel:com/450/200/sports"></div> </div> <div class="gallery-item"> <div class="content"><img src="http.//lorempixel.com/400/210/sports"></div> </div> <div class="slider-item"> <div class="content"><img src="assets/slider-image-9.jpg"></div> </div> </div> </body> </html>
如何將 HTML CSS 圖像滑塊轉換為 Angular 圖像滑塊？
[英]How to convert a HTML CSS image slider into Angular image slider?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.