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

编程问答 2022-06-01

问题描述

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

 var commandsConfig = new CommandsNextConfiguration
        {
            **StringPrefix = new string[] { configJson.Prefix },** //here is the error
            EnableDms = false,EnableMentionPrefix = true,};

这是按右箭头按钮更改图标滑动的 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>

解决方法

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

id="notActive"

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

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

和奖励：您也可以使用当前 div 索引值，那么您不必使用上一个，下一个。您可以一一增加或减少索引值。只是一个建议。

,

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

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

最后，jQuery 没有帮助，可以消除。

这里有一种更标准的方法来使某些东西处于活动/非活动状态，使用名为“活动”的类：

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

htmljavascriptjqueryslideshow