如何使自动滑翔旋转木马在活动时改变背景图像

Question

我的问题有三部分。如果能对这个JS问题的任何部分提供任何帮助，我们将不胜感激。我试图通过尝试和错误来学习和理解JS。

​

​

我创建了这个漂亮的旅行登陆页面，https://portfolioprime.github.io/Nature%20carousel/glidejs.html有一个缩略图旋转木马，它使用了Glide.js，它非常酷，工作也很好。旋转木马向左移动，并有箭头按钮手动控制幻灯片。

但是我一直在尝试实现一个普通的JS旋转木马滑块，但我不幸地失败了。一直挣扎了两天，我能达到的最好是得到一个旋转木马项目左右移动。见https://portfolioprime.github.io/Nature%20carousel/。

我想要的是让旋转木马自动滑动，用箭头按钮手动控制滑块。

我的目标是使用querySelectorAll('.carousel-items')的所有旋转木马项目，并将left:-274px添加到旋转木马容器glide__slides中。

这是我的JS密码。

// var & event-listener buttons
document.querySelector(".left").addEventListener("click", slideLeft);

document.querySelector(".right").addEventListener("click", slideRight);

// Function slide left
function slideLeft(left) {
  document.querySelector('.glide__slides').style.left = left;
}
// Function slide left
function slideRight(right) {
  document.querySelector('.glide__slides').style.left = right;
}

其次，我想要一个活动的旋转木马-项目，当活动自动改变背景图像.

现在，我有了hero.style.background = var;，我已经在每个旋转木马项目上用onclick = function('01.jpg')更改了它。

这是密码。

// Change Hero Img
 function heroChange(hmmm) {
  var hero = document.querySelector('.hero');
  hero.style.background = hmmm;
 }

因此，我想我应该将EventListeners添加到旋转木马项中，并向旋转木马项中添加一个活动类，

var slides = document.querySelectorAll('.carousel-items');

function changeBgImg() {
  slides.forEach(s => s.classList.remove('active');
  this.classList.add('active');

//change the bg image === this
//But I have no idea how to do that

}

第三，我使用上述相同的函数获得了内容、背景和旋转木马指示器，但这似乎是非常脏的代码。HTML有每个.carousel-item，其中有10个，每个调用4个函数。看起来是这样的：

      <div class="glide hero-carousel">
        <div class="glide__track" data-glide-el="track">
          <ul class="glide__slides">

            <li class="glide__slide carousel-item" 
              onclick="heroChange('url(images/02.jpg) bottom/cover no-repeat'); 
              number('01'); 
              h4('Destination Shire'); 
              h1('Valley<br> of Dreams');">

              <div class="carousel-text">
                <p>Destination Shire</p>
                <h3>Valley<br> of Dreams</h3>
              </div>

            </li>

            <li class="glide__slide carousel-item" 
              onclick="heroChange('url(images/03.jpg) bottom/cover no-repeat'); 
              number('02'); 
              h4('Destination Westwood'); 
              h1('Misty<br> Woodlands');">

              <div class="carousel-text">
                <p>Destination Westwood</p>
                <h3>Misty<br> Woodlands</h3>
              </div>

            </li>

         </ul>
       </div>
     </div>

所以看起来挺恶心的。不过，它可以工作，但我希望找到一种更优雅的方法来实现这一目标，方法是将所有这些功能放在一个按顺序执行每个部分的函数中。

最后，我想转换一下点击动画，但这完全是另一个水壶。

就是这样。呼！

谢谢你们抽出时间来，我很感激。你能提供的任何帮助都会让我成为一个更好的设计师。实际上，我有很多项目会从答案中受益。

如果您可以提供至少第2&3部分的帮助:将代码清理成1函数，并在active类上更改bg映像，这将是一个很大的帮助。

JS能做的事情太多了，我在谷歌和youTube上找不到答案。

再次感谢您。

最新情况：

如本问题所示，我通过使用边距左编辑了滑块：

vanilla javascript carousel not sliding

// var & event-listener buttons
document.querySelector(".left").addEventListener("click", slideLeft);
document.querySelector(".right").addEventListener("click", slideRight);


let marginLeft = 0;
const slides = document.querySelector('.glide__slides');

// Function slide left
function slideLeft() {
  marginLeft += 264;
  slides.style.marginLeft = marginLeft + 'px';
  console.log(getComputedStyle(slides).marginLeft);
}
// Function slide Right
function slideRight() {
  marginLeft -= 264;
  slides.style.marginLeft = marginLeft + 'px';
  console.log(getComputedStyle(slides).marginLeft);
}

这使得旋转木马一次手动移动1张幻灯片。仍然不完全理解为什么我前面的代码不能工作。如果有人能向我解释的话那就太好了。

我仍然有一些问题：

1. 在幻灯片末尾自动滑行和循环。

具有活动滑块的

1. 自动更改背景。此时，它仅在.

上进行更改。

1. 找到了一种整理函数调用和函数的方法。

Answer 1

这个问题询问了关于如何简化代码和如何使用本机JavaScript创建一个连续滚动的滑块的各种想法。

代码最初使用的滑翔机，它可能是一些更简单的东西，以获得所需的结果，例如，使用动画事件改变背景时，幻灯片到左手边。然而，慢慢地吃大象，我会先处理讨厌的代码(第3部分)。

虽然HTML看起来相当令人望而生畏，但是对于每个li元素调用4次单击，这是当前所需要的，所以让我们研究在运行时创建它。这给了我们更容易维护的代码。例如，如果我们想要删除一个幻灯片，或者改变幻灯片的顺序，或者添加一个幻灯片，我们只需修改下面定义的滑块数组，JavaScript就可以完成剩下的操作。

问题的第一部分是关于滑动的问题。我们使用CSS动画来滑动整个ul元素，其中33 is是幻灯片的总宽度(包括边距/填充)

@keyframes sliding0 {
  0% { left: 0; }
  30% { left: 0; }
  100% { left: -33vw; }
}

我们在元素中添加了一个事件侦听器来捕捉动画结束事件，因为当ul滑动了一个幻灯片的宽度时，我们想要改变英雄图像，我们希望将刚刚消失的幻灯片放到无限滑动的后面。然后，我们设置动画再次运行。

有关如何处理此事件和其他事件的详细信息，请参阅代码片段。它还展示了changeHero函数如何工作，这是问题的第2部分。注意，代码片段在SO环境中或多或少地工作，尽管偶尔会忽略部分悬停操作。但是，在您自己的机器上运行代码应该是可以的。

​

<!DOCTYPE html>
<html>
<head>
<style>

@keyframes sliding0 {
  0% { left: 0; }
  30% { left: 0; }
  100% { left: -33vw; }
}

@keyframes sliding1 {
  0% { left: 0; }
  30% { left: 0; }
  100% { left: -33vw; }
}

body {
  background-repeat: no-repeat no-repeat;
  background-size: cover;
  background-position: center center;
}
div .glide_track {
  position: relative;
  width: 100vw;
  overflow-x: hidden;
}

ul {
  position:relative;
  left: 0;
  width: 330vw;
  height:100vh;
  animation-name: sliding0;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  position: relative;
  left:0;
  top:0;
  float:left;
  width: 32vw;
  height:30vw;
  display: inline-block;
  margin: 0;
  margin-right: 1vw;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
}

</style>
</head>
<body>
<script>

// we put the two lots of text and the image url for each slide in an array in the order they are to be shown
// this makes it easier to maintain when you want to add or remove a slide or change their order
// we only have one slider at the moment but this makes it more general

// these are the offsets in the array describing a slide. Done as indexes rather than named as easier to set up sliders array
const img = 0;
const text1 = 1;
const text2 = 2;

const sliders = [
  [
    ['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
    ['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
    ['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
    ['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams']
  ]
];

// go through each slider and create its outer divs and its ul element
sliders.forEach(createSlider);

function createSlider(slider,sliderno) {
  const div1 = document.createElement('DIV');
  const div2 = document.createElement('DIV');
  const ul = document.createElement('UL');

  div1.classList.add("glide","hero-carousel");
  div2.classList.add("glide_track");
  div2.setAttribute("data-glide-el","track");

  div1.appendChild(div2);
  div2.appendChild(ul);
  document.body.appendChild(div1);

  ul.classList.add("glide__slides");
    
  ul.addEventListener("animationend", animationEnd);
 
  slider.forEach(createLi);

  function createLi(slide,slideNo) {
    const li = document.createElement('LI');
    li.classList.add("glide__slide","carousel-item");
    li.style.backgroundImage='url('+slide[img]+')';
    li.addEventListener("click",slideClicked);
    li.addEventListener("mouseover",slideHovered);
    li.addEventListener("mouseout",slideUnhovered);
    
    li.setAttribute('data-slideno','0' + slideNo);//! needs generalising if you have >10 slides !

    ul.appendChild(li);

    const div = document.createElement('DIV');
    const p = document.createElement('P');
    const h3 = document.createElement('H3');

    p.innerHTML = slide[text1];
    div.appendChild(p);
    h3.innerHTML = slide[text2];
    div.appendChild(h3);

    li.appendChild(div);
  }
}

// this is for testing, in real version use whatever required (i.e. whichever element is to have the hero image)
function ahHeroChange(backgroundImage) {  
  document.body.style.background = backgroundImage + " bottom/cover no-repeat";
}

function slideClicked(event) {
  var slide = event.target;
  var slideNo = slide.getAttribute('data-slideno');
  
  // make the hero image the same as the slide's
  ahHeroChange(slide.style.backgroundImage);
  
/* I don't know what these functions do - they were executed in the original on a click 

  number(slideno);
  h4(slide.firstElementChild.querySelector('p').innerHTML);// text1 of the slide is passed to h4
  h1(slide.firstElementChild.querySelector('h3').innerHTML;// text2 of the slide is passed to h1

*/
}

function slideHovered(event) {
  var slide = event.target;
  var slider = slide.parentElement;
  slider.style.animationPlayState = 'paused';
  ahHeroChange(slide.style.backgroundImage);
}

function slideUnhovered(event) {
  var slide = event.target;
  var slider = slide.parentElement;
  
  //restore the hero image to the first one in the slider
  ahHeroChange(slider.firstElementChild.style.backgroundImage);
  
  //get the animation running again
  slider.style.animationPlayState = 'running'; 
}

function animationEnd(event) {
   //find the element that was clicked (it will be a ul element representing a slider)
   var slider = event.target;
   
  //take the first slide off the list and put it back at the end
  slider.append(this.firstElementChild);
  
  //change the hero image to the slide which is now the leftmost - use modified heroChange in the final version
  document.body.style.backgroundImage = this.firstElementChild.style.backgroundImage;
  
  // toggle the animationName (to an identical keyframes action) to force the animation to start again
  slider.style.animationName='sliding'+(Number(event.animationName.replace('sliding',''))+1)%2;
}

</script>
</body>
</html>

​