如何使用纯 Javascript 或纯 Javascript 库创建背景图片幻灯片

编程问答 2022-05-31

问题描述

我想以一种可以在背景中滑动两张图片的方式来制作下面的内容，但是我一直在思考如何实现背景图片的幻灯片。请协助，任何帮助将不胜感激。

#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>

解决方法

我使用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>

,

据我所知，你不能完全按照你的要求去做。但是，您可以通过 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 让我意识到这一点并修改了我的答案。

htmljavascriptsliderslider