带有哈希永久链接的 jQuery 循环

Question

我正在尝试让 jQuery Cycle 使用每张幻灯片中的唯一名称，以便能够直接链接到每张幻灯片。我在 malsups 网站上找到了这个：http://jquery.malsup.com/cycle/perma2.html

尝试将其合并到我的演示中，但无济于事，不确定我做错了什么？
演示： http://jsbin.com/uviram/1

即使我去http://jsbin.com/uviram/1#slide2，它仍然会引导我去http://jsbin.com/uviram/1#slide1..

$(function() {

    var h, 
        hash = window.location.hash, 
        hashes = {},
        index = 0;

    $('.slideshow slide').each(function(i) {
        h = $(this).data('hash');
        hashes[h] = i;
    });

    if (hash)
        index = hashes[hash.substring(1)] || index;

    $('.slideshow').cycle({
        fx: 'scrollHorz',
        timeout: 0,
        prev: $('.prev'),
        next: $('.next'),
        after: function(curr,next,opts) {
            h = $(this).data('hash');
            window.location.hash = h;
        }
    });
});

Answer 1

我已经更新了你的 jsbin 演示，现在它可以工作了。存在三个问题：

• 首先，我将$('.slideshow slide') 更改为$('.slideshow .slide') 以正确选择幻灯片。

• 其次，我将startingSlide选项放入循环调用中。

• 最后，我加入了一个 hashchange 监听器，这样如果用户改变了 哈希没有重新加载页面，它会循环到正确的 幻灯片。

查看更新后的演示，看看它是否有效：

http://jsbin.com/uviram/6#slide4

Answer 2

您尚未包含 startingSlide 选项以将您的 index 传递给

$('.slideshow').cycle({
        /* pass index to startingSlide*/
        startingSlide:index,
        fx: 'scrollHorz',
        timeout: 0,
        prev: $('.prev'),
        next: $('.next'),
        after: function(curr,next,opts) {
            h = $(this).data('hash');
            window.location.hash = h;
        }
});