幻灯片：如何使用div ID跳到不同的幻灯片？

knocked loose 发表于 Dev

敲松

我正在构建“产品导览”。它正在构建为全屏幻灯片，我使用prev和next箭头进行导航（以及箭头键）。但是现在有了时间表，我似乎无法使用div-id？来“跳到”幻灯片。

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

这是我的工作示例。滑块的时间轴显示在幻灯片2+上。对于示例，我仅在各target节中进行工作。

对于jQuery，这是我用于binding创建所有代码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>

在此先感谢您的帮助和答复！

Venugopal

我没有费力去检查此代码，但我相信以下代码至少应该对这5个部分有效。

获取id目标的链接href属性。
```
target_id = $(this).attr('href');
```
删除active-tour当前面板上的类
```
removeClasses();
```
active-tour在当前面板（target_id）上添加fadeInLeft动画
```
$(target_id).addClass("active-tour fadeInLeft");
```
删除fadeOutRight“上一个”面板上的退出动画class（）
```
$($(".tour-panel")[current]).removeClass("fadeOutRight");
```

最后，设置current面板索引

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;
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。