启用后如何使自动滑动式轮播缩略图更改背景图片

问题描述

我的问题分为3部分。对于此JS问题的任何部分的任何帮助，将不胜感激。我试图通过反复试验来学习和理解JS。

我创建了一个外观漂亮的旅行登陆页面 https://portfolioprime.github.io/Nature%20carousel/glidejs.html，其中包含一个使用Glide.js的缩略图轮播，这真的很酷，而且效果很好。转盘向左移动，并带有箭头按钮以手动控制幻灯片。

但是我一直在尝试实现香草JS轮播滑块，但是我失败了。经过2天的苦苦挣扎，我能做到的最好就是让单个旋转木马项目左右移动。参见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') onclick。

这是代码。

// 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，其中有十个，每个调用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个函数，并在活动类上更改bg-image，那将是很大的帮助。

JS可以做很多事情，而我在Google和youTube上找不到答案。

再次感谢您。

更新：

我已使用此问题所示的margin-left来编辑滑块：

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张幻灯片。仍然不能完全理解为什么我上面的先前代码无法正常工作。如果有人可以向我解释这一点，那就太好了。

我仍然遇到一些问题：

幻灯片末尾的自动滑动和循环播放。
具有活动的滑块会自动更改背景。此时，它只会更改onclick。
找到一种整理函数调用和函数的方法。

解决方法

该问题询问有关如何简化代码以及如何使用本机JavaScript创建连续滚动的滑块的各种想法。

该代码最初使用滑翔机，可能更简单一些就可以得到所需的结果，例如，当幻灯片到达左侧时，使用animationend事件更改背景。但是，慢慢地吃掉大象，我将首先解决令人讨厌的代码（第3部分）。

尽管HTML看起来让人望而生畏，但例如对于每个li元素而言，一次单击就需要4次调用，但目前这是必需的，因此让我们研究一下在运行时如何创建它。这使我们的代码更易于维护。例如，如果我们要删除一张幻灯片，或更改幻灯片的顺序或添加一张幻灯片，我们只需更改下面定义的滑块数组，其余的将由JavaScript完成。

问题的第1部分问及滑动。我们使用定义如下的CSS动画滑动整个ul元素，其中33vw是幻灯片的总宽度（包括边距/填充）

Compose

，我们在元素上添加了一个事件侦听器，以捕获动画结束事件，因为当ul滑动了一张幻灯片的宽度时，我们想要更改英雄形象，并且希望将刚刚消失的幻灯片放到infinie的背面滑动会起作用。然后，我们设置动画再次运行。

有关如何处理此事件和其他事件的详细信息，请参见代码段。它还显示了changeHero函数如何工作，这是问题的第二部分。请注意，该代码段在SO环境中或多或少地起作用，尽管有时悬停动作会被部分忽略。在自己的计算机上运行代码应该没问题。

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

javascript vanilla-typescript

启用后如何使自动滑动式轮播缩略图更改背景图片

问题描述

解决方法

相关问答