幻灯片:如何使用div ids跳转到不同的幻灯片？

Question

我正在建设一个“产品之旅”。它是作为一个全屏幻灯片构建的，我有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>

谢谢您的帮助和回复！

Answer 1

我没有办法检查这段代码，但我相信下面的代码应该有效，至少在这5部分中是这样的。

1. 获取目标的id，即链接的href属性。 target_id = $(this).attr('href')；
2. 删除当前面板上的active-tour类 removeClasses()；
3. 添加当前面板上的active-tour (target_id)和动画的fadeInLeft $(Target_id).addClass(“活动-旅游fadeInLeft")；
4. 移除“上一”面板上的退出动画类(fadeOutRight) $($(".tour-panel")current).removeClass("fadeOutRight")；
5. 最后，设置current面板索引 current = target_id.split('-')1 x= 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;
});

Answer 2

这可以通过重构JS来完成。我们将添加一个也可用于箭头导航的函数。它看起来可能是这样的：

首先，我们将创建一些变量(因为存储通常比创建jQuery-对象更快)：

var current = 0,
    $panels = $('.tour-panel'),
    noOfPanels = $panels.size() - 1,
    $currentElement = $panels.eq(current),
    $nextElement = $currentElement,
    $links = $('.slideshow-timeline a');

在本例中，重要的是$links和$panels包含相同数量的元素。现在，我们可以编写更改$panels的函数了。

function anyElement( slidePosition ) {
    $nextElement = $panels.eq(next);
    if (slidePosition > current) {
        $currentElement.removeClass('active-tour');
        $currentElement.addClass('fadeOutLeft');
        setTimeout(function () {
            $nextElement.addClass('active-tour fadeInRight');
        }, 50);
        setTimeout(function () {
            $currentElement.removeClass('fadeOutLeft');
        }, 750);
    } else if (slidePosition < current) {
        $currentElement.removeClass('active-tour');
        $currentElement.addClass('fadeOutRight');
        setTimeout(function () {
            $nextElement.addClass('active-tour fadeInLeft');
        }, 50);
        setTimeout(function () {
            $currentElement.removeClass('fadeOutRight');
        }, 750);
    } else {
        // in this case the element selected and the one showing are the same
        // there are no class changes to be applied
    }
    current = slidePosition;
    $currentElement = $nextElement;
}

该函数接受参数slidePosition (代表新panel的index的数字)并更改appropiate类。

现在剩下的就是将函数绑定到用户交互中。

如果匹配的$links之一是clicked，我们将检查它是index，并使用它作为新函数的参数。

$links.on('click', function () {
    e.preventDefault();
    var next = $links.index(this);
    anyElement( next );
});

我们以类似的方式处理箭头和Mousetrap。知道current位置后，我们计算出所需的位置(考虑到panels的最大数目)。

$('.previous').click(function () {
    var previous;
    if (current === 0) {
        previous = noOfPanels;
    } else {
        previous = current - 1;
    }
    anyElement( previous );
});
Mousetrap.bind('left', function () {
    var previous;
    if (current === 0) {
        previous = noOfPanels;
    } else {
        previous = current - 1;
    }
    anyElement( previous );
});

$('.next').click(function () {
    var next;
    if (current === noOfPanels) {
        next = 0;
    } else {
        next = current + 1;
    }
    anyElement( next );
});
Mousetrap.bind('right', function () {
    var next;
    if (current === noOfPanels) {
        next = 0;
    } else {
        next = current + 1;
    }
    anyElement( next );
});

我没有时间去测试这个，但我相信它应该能工作。如前所述，重要的是$links和$panels具有相同数量的元素，并且排列顺序相同。

)有一些开销。您可能希望删除一些全局变量，而使用参数。)

在边节点上：

$('.myClass').eq(5)

返回一个jQuery对象，并且(据我所知)比

$($('.myClass')[5])