0

我正在使用以jQuery Cycle为核心的 jQuery maximage来浏览幻灯片，并在每次转换时修改（替换）位置哈希。

它有效，除非您尝试导航太快；此时浏览器（在 Firefox 和 Chrome 中测试）将崩溃，因为页面会无休止地尝试重新加载自身。

$(function(){
    var h, 
        hash = window.location.hash, 
        hashes = {},
        index = 0;
    // Iterate slides into hashes object
    $('#slides').children('div').each(function(i) {
        h = $(this).attr('id');
        // Change IDs to hash format
        h = h.replace(/\ /g, '-');
        hashes[h] = i;
        slideInteger = i
    });
    if (hash) {
        index = hashes[hash.substring(1)] || index;
    };
    $('#slides').maximage({
        cycleOptions: {
            startingSlide: index,
            cssTransitions: true,
            after: onAfter,
            fx: 'fade',
            speed: 360,
            timeout: 0
        },
        onFirstImageLoaded: function(){
            $('#cycle-loader').hide();
            // Remove tooltip on hover
            $('.mc-image').hover(function(){
                $(this).removeAttr('title');
            });
        }
    });
    function onAfter(el, next_el, opts) {
        var nextHash = $(next_el).find('.slideLink').text().toLowerCase().replace(/\ /g, '-');
        window.location.replace(('' + window.location).split('#')[0] + '#' + nextHash);
    };
    $(window).on("hashchange", function() {
        $('#slides').cycle(hashes[window.location.hash.substring(1)] || 0);
    });
});

我尝试将 onAfter 函数替换为...

function onAfter(el, next_el, opts) {
    var nextHash = $(next_el).find('.slideLink').text().toLowerCase().replace(/\ /g, '-');
    if( window.location.hash != ('#' + nextHash) ){
        window.location.replace(('' + window.location).split('#')[0] + '#' + nextHash);
    }
};

......但它似乎没有任何区别。

这似乎也不是我可以在 jsfiddle 中复制的东西——因此对缺乏物理演示表示歉意。

4

1 回答 1

1

您应该为此使用 HTML5 history.pushState/ history.replaceStateAPI。您也有适用于旧版浏览器的垫片。

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history “添加和修改历史条目”

于 2013-02-28T11:59:54.077 回答