如何使用純 Javascript 或純 Javascript 庫創建背景圖像幻燈片

Question

我想以一種可以讓兩個圖像在背景中滑動的方式制作以下內容，但我一直堅持如何實現背景圖像的幻燈片。 請協助，任何幫助將不勝感激。

 #header-image { background-image: url('/images/photography1.jpg'); width: 100%; border: none; padding: 0; margin: 0; background-position: bottom center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; }

 <div id="header-image"> <div class="overlay" data-aos="fade-down-right"> <h1>Photography Logo</h1> </div> </div>

Answer 1

我使用 javascript 為您做了一個示例，並修改了您的 html 和 css。 這樣的結果有必要嗎？ 如果您有任何問題，請告訴我。

 let anime = document.querySelector('#header-image'); var step = 0; function animate() { if (step > -200) { anime.style.transform = 'translateX('+ step +'vw)'; } else { anime.style.transform = 'transformX(100vw)'; step = 100; } } setInterval(function () { step = step - 100; animate(); }, 5000);

 body { padding: 0; margin: 0; } #header { overflow: hidden; } #header-image { border: none; width: 200vw; height: 100vh; transition: 1s; display: flex; } #photo_section_one { background-image: url('https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg'); width: 100vw; background-position: bottom center; background-repeat: no-repeat; background-size: cover; height: 100%; } #photo_section_two { background-image: url('https://lh3.googleusercontent.com/proxy/N_97o7XR3tJd8Thp4vFQxXqqQVMSgBNhjGlvvHa9bDnpW-i4v6J9EElWWMSC8qumCbDAfvAjroBDWBu8F1HPl-hZX1BsYOk-wDNO26pT19W90o8n22aABvQ'); width: 100vw; background-position: bottom center; background-repeat: no-repeat; background-size: cover; height: 100%; }

 <div id="header"> <div id="header-image"> <div id="photo_section_one"> <div class="overlay" data-aos="fade-down-right"> <h1>Photography Logo</h1> </div> </div> <div id="photo_section_two"> <div class="overlay" data-aos="fade-down-right"> <h1>Photography Logo</h1> </div> </div> </div> </div>

使用圖像數組的第二種解決方案。 圖像在您顯示的網站上發生變化。

 let anime = document.querySelector('#header-image'); let images = ['https://vjoy.cc/wp-content/uploads/2019/08/1-39.jpg', 'https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg']; let index = 0; setInterval(function(){ anime.style.backgroundImage = 'url(' + images[index] + ')'; index++; if (index >= images.length) { index = 0; } }, 5000);

 * { padding: 0; margin: 0; } #header { overflow: hidden; } #header-image { border: none; height: 100vh; transition: 1s; background-image: url('https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg'); width: 100%; background-position: bottom center; background-repeat: no-repeat; background-size: cover; }

 <div id="header"> <div id="header-image"> <div id="photo_section_one"> <div class="overlay" data-aos="fade-down-right"> <h1>Photography Logo</h1> </div> </div> </div> </div>

Answer 2

據我所知，你不能完全按照你的要求去做。 但是，您可以通過 z-index 和絕對定位、一些 css 和一些 js 創建類似的東西。 您必須在文本后面創建一個 div 並使用 css 對其進行動畫處理，同時使用一些 js 使其不斷循環。

 setInterval(function() { if (document.getElementsByClassName("slide-pos-1")[0].= undefined) { document.getElementsByClassName("background-slide")[0].classList.add("slide-pos-2") setTimeout(function() { document.getElementsByClassName("background-slide")[0].classList.remove("slide-pos-1") document.getElementsByClassName("background-slide")[0].classList,remove("slide-pos-2") }. 1500) } else { document.getElementsByClassName("background-slide")[0].classList,add("slide-pos-1") } }, 6000)

 html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }.background-slide { position: absolute; top: 0; left: 0; width: 300%; height: 100%; display:flex; transform:translate(0,0); transition: transform 0s ease-out; }.slide-pos-1{ transform:translate(calc(-100% / 3),0); transition: transform 1s ease-out; }.slide-pos-2{ transform:translate(calc(-200% / 3),0); transition: transform 1s ease-out; }.header-image { width: 100%; height: 100%; }.overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }.image { flex:1; } img { object-fit: cover; width:100%; height:100%; margin:0; }

 <div class="header-image"> <div class="background-slide slide-pos-1"> <div class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" /></div> <div class="image"><img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" /></div> <div class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" /></div> </div> <div class="overlay"> <h1>Photography Logo</h1> </div> </div>

還有，這個不是文字和圖片一起滑動的，滑動的方向是一樣的。 感謝 s.kuznetsov 讓我意識到這一點並修改了我的答案。