如何使用 jQuery 制作图标幻灯片答案

【问题标题】：How to make an icon slideshow with jQuery如何使用 jQuery 制作图标幻灯片
【发布时间】：2020-12-31 14:11:44
【问题描述】：

您好，我正在构建一个小图标幻灯片，并且还希望在图标中包含数据，例如其速度和颜色。我已经从页面顶部加载了 jQuery。

<body>
    <div class="main-container">
        <div class="object-container">

        <div class="icon-container">
            <i class="fa fa-car" id="active"></i>
            <i class="fa fa-bicycle" id="not-active"></i>
            <i class="fa fa-plane" id="not-active"></i>
            <i class="fa fa-ship" id="not-active"></i>
            <i class="fa fa-fighter-jet" id="not-active"></i>
            <i class="fa fa-space-shuttle" id="not-active"></i>
        </div>
        <div class="arrow-buttons">
            <a href="" class="right-arrow"></a>
            <a href="" class="left-arrow"></a>
        </div>
        </div>
    </div>
    
</body>

这是 jquery 按下右箭头按钮来更改图标之间的幻灯片，但它似乎不起作用？

$(document).ready(function(){
    $('.right-arrow').on('click', function(){
        let currentImg = $('#active');
        let nextImg = currentImg.next();

        if(currentImg.length){
            currentImg.removeAttr('#active').css('z-inex', -10)
            nextImg.attr('#active').css('z-index', 10);
        }
    });
});

【问题讨论】：

标签： javascript html jquery slideshow

【解决方案1】：

首先，我推荐使用class而不是id。即使你要使用id，也不建议使用这种方式。 id 值必须是 uniq。在您的情况下，您的 ID 不是唯一的。而且像这个 ID 选择器这样使用会更好。

id="notActive"

您可以尝试使用每个函数来获取当前 div。我试过你的代码，但没有成功，每个都是。

$('.fa').each(function(){
 if( $(this).hasClass('active') ){
   currentImg = $(this);
  }
})

还有好处：你也可以使用当前的 div 索引值，然后你不必使用 prev，next。您可以一一增加或减少索引值。只是一个建议。

【讨论】：

你有 HTML 的例子吗？我将在哪里编写该函数，我假设类似于 rightArrow.addEventListener(onclick(function)?

【解决方案2】：

您错误地使用了 id 属性，因为每个 id 都必须是唯一的。

另外，在元素上设置 z-index 无效。

最后，jQuery无济于事，可以被淘汰。

这是一种更标准的方法来使某些东西处于活动/非活动状态，使用名为 `active' 的类：

// control buttons
const right = document.querySelector('.right-arrow');

// handle right click
right.onclick = function() {
  const activeImg = document.querySelector('i.active');
  const nextImg = activeImg.nextElementSibling;

  if (activeImg && nextImg) {
    activeImg.classList.remove('active');
    nextImg.classList.add('active');
  }
};

i {
  font-size: 32px;
  z-index: -10; /* this has no effect */
}

.active {
  z-index: 10;
  background-color: yellow;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="main-container">
  <div class="object-container">

    <div class="icon-container">
      <i class="fa fa-car active"></i>
      <i class="fa fa-bicycle"></i>
      <i class="fa fa-plane"></i>
      <i class="fa fa-ship"></i>
      <i class="fa fa-fighter-jet"></i>
      <i class="fa fa-space-shuttle"></i>
    </div>
    <div class="arrow-buttons">
      <a href="#" class="right-arrow">right-arrow</a>
    </div>
  </div>
</div>

【讨论】：

嗨，这似乎对我不起作用。我点击了右箭头，但什么也没发生？
@MoMiah 请在此处发布您的代码的工作 sn-p，以便我们查看问题所在。