Question

我正在制作幻灯片（CodePen Example）：

<div class="slide">
  <ul class="data">
    <li id="C1" class="active">
     <img src="http://placehold.it/840x200">
    </li>
    <li id="C2">
      <img src="http://placehold.it/800x200">
    </li>
  </ul>
  <ul class="pipe">
    <li><a href="#C1" class="active"></a></li>
    <li><a href="#C2"></a></li>
  </ul>
</div>

然后我有以下JQuery：

function swap(name) {
  $('.slide .data .active').hide().removeClass('active');
  $('.slide .data [id = ' + name + ']').addClass('active').fadeIn("slow");
}
$(function () {
  $('.slide .data li:not(".active")').hide();
  $('.slide .pipe a').on("click", function () {
    swap($(this).attr('href').replace(/^.*?(#|$)/, ''));
    return (false);
  });
});

目前我有2个问题：

当我点击活动圆圈时，当前幻灯片闪烁。
即使幻灯片显示，活动圈也不会改变。

最后，我的JQuery代码可以改进吗？

谢谢你，米格尔

Answer 1

我修改了几个不同的东西，以实现我认为你想要的;这是您CodePen example的更新版本。

一些主要变化：

代码中没有任何内容可以定位或更改活动的圈子，并且无法轻易区分一个圈子与另一个圈子。我将class="C1"和class="C2"添加到相应的列表项中，并使用以下行在交换函数中定位它们：

$('.slide .pipe a').removeClass('active');
$('.slide .pipe .' + name + ' a').addClass('active');

我通过position:absolute，z-index和添加/删除active类的组合将新项目放在旧项目的顶部，从而实现了淡化效果

在幻灯片系统中显示和隐藏LI项目

1 个答案: