javascript - 幻灯片 : How to jump to different slides with div ids?

Question

我正在构建“产品之旅”。它被构建为全屏幻灯片，我有 prev 和 next 箭头用于导航(以及箭头键)。但是既然我有了时间线，我似乎无法使用 div-id 来“跳转到”幻灯片？

例如，如果我想从第 1 部分转到第 5 部分，我希望能够单击我的 第 5 部分 按钮，它会跳转到该幻灯片。

Here is my working example . slider 的时间轴出现在幻灯片 2+ 上。例如，我只在 target 部分中工作。

对于 jQuery，这是我用于绑定(bind) 和创建 slider 的所有代码

/* Product Tour */

$(document).ready(function() {
var current = 0;

function previousIndex() {
  var previous = current - 1;
  if(previous == -1) {
      previous = $(".tour-panel").size() -1;
  }
  return previous;
}

function nextIndex() {
  var next = current + 1;
  if(next == $(".tour-panel").size()) {
    next = 0;
  }
  return next;
}

function removeClasses() {
  $(".tour-panel").each(function(index) {
    if(index != current) {
        $(this).removeClass("active-tour");
    }
  })
}

function nextElement() {
  removeClasses();
  $($(".tour-panel")[current]).addClass("fadeOutLeft");
  current = nextIndex();
  setTimeout(function() {
    $($(".tour-panel")[current]).addClass("active-tour fadeInRight");
  }, 50);
  setTimeout(function() {
    $($(".tour-panel")[previousIndex()]).removeClass("active-tour fadeOutLeft");
  }, 750);
}

function previousElement() {
  removeClasses();
  $($(".tour-panel")[current]).addClass("fadeOutRight");
  current = previousIndex();
  setTimeout(function() {
    $($(".tour-panel")[current]).addClass("active-tour fadeInLeft");
  }, 50);
  setTimeout(function() {
    $($(".tour-panel")[nextIndex()]).removeClass("active-tour fadeOutRight");
  }, 750);
}

Mousetrap.bind('left', previousElement);
Mousetrap.bind('right', nextElement);

$(".previous").click(previousElement);
$(".next").click(nextElement);
});

我正在使用 addClass 和 removeClass 来切换事件页面(或您实际看到的页面)。

这也是我的时间轴的 HTML，您可以看到我只是在尝试使用 a 标签来交换幻灯片。

<ul class="slideshow-timeline">
    <li class="active-target-main"><a href="#target">Target</a>
        <ul class="current-section">
            <li><a href="#target-1">Tracking</a></li>
            <li><a href="#target-2">Segmentation</a></li>
            <li><a href="#target-3">Wealth Screening</a></li>
            <li><a href="#target-4">Targeting</a></li>
            <li><a href="#target-5">Cultivation</a></li>
        </ul>
    </li>
    <li><a href="#connect">Connect</a></li>
    <li><a href="#convert">Convert</a></li>
    <li><a href="#optimize">Optimize</a></li>


</ul>

在此先感谢您的帮助和回复!

Answer 1

我没有 fiddle 来检查这段代码，但我相信下面的代码应该可以工作，至少对于这 5 个部分。

1. 获取目标的 id，它是链接的 href 属性。

   target_id = $(this).attr('href');
   

2. 删除当前面板上的active-tour类

   removeClasses();
   

3. 在当前面板(target_id) 上添加active-tour 和fadeInLeft 动画

   $(target_id).addClass("active-tour fadeInLeft");
   

4. 移除“上一个”面板上的退出动画类(fadeOutRight)

   $($(".tour-panel")[current]).removeClass("fadeOutRight");
   

5. 最后，设置当前面板索引

   current = target_id.split('-')[1] || 0;
   

所以，

$('.current-section li a').click(function() {
    var target_id = $(this).attr('href');
    removeClasses();
    $($(".tour-panel")[current]).addClass("fadeOutRight");
    setTimeout(function() {
        $(target_id).addClass("active-tour fadeInLeft");
    }, 50);
    setTimeout(function() {
        $($(".tour-panel")[current]).removeClass("fadeOutRight");
    }, 750);
    current = target_id.split('-')[1] || 0;
});