Question

好的，我根据评论更新了我的代码，谢谢你。所以后退按钮现在正在工作，但是，它已经阻止我的内部链接工作，因为它们不再反映在URL中。以前我正在编写链接并填写幻灯片编号：

<a href="javascript:setSlide(1)"></a>

这仍然有效，但不会像使用malsup代码那样更改URL。如何将这2位代码链接起来？我不是很有经验。

非常感谢

$(function () {

// get current slide's number
function currentSlide() {
    var hash = window.location.hash || '#slide-1';
    return parseInt(hash.replace(/[A-Za-z#\-\/!]/g, '') - 1); 
}
// global vars  
var cycleSelector = $('.images'),
        startSlide = currentSlide(),
        hasSlid = 0;

// append some markup for the controls      
cycleSelector.before() 
// start jQuery Cycle   
.cycle({ 
     startingSlide: startSlide,
     // when using the next/prev links
 onPrevNextEvent: function(isNext, idx, slide) { 
    hasSlid = 1;
    window.location.hash = "slide-"+ (parseInt(idx) + 1) + ""; 
    return false;
 },
 // when using the pager thumbnails
 onPagerEvent: function(idx, slide) { 
    hasSlid = 1;
    window.location.hash = "slide-"+ (parseInt(idx) + 1) + "";  
    return false;
 },
 timeout: 0, 
 pager:  '#nav',
 next: '.next',
 prev: '.prev',
 slideResize: 0,
 containerResize: 0,
 speed: 500,
 before: onBefore,
 nowrap: 1,
 // build the thumbnails
 pagerAnchorBuilder: function(idx, slide) { 
   return '<a href="#"><p>' + $(slide).find('h1').html() + ' </p></a>'; 
} 
});


// bind to the hashchange event
$(window).bind('hashchange', function () {
        var slideNo = currentSlide();
        // we only want to fire the slide change if the next button or the pager hasn't done it for us
        if (hasSlid === 0) { cycleSelector.cycle(slideNo); }
        // return it back to zero
        hasSlid = 0;
}); 

// when the page loads, we need to trigger a hashchange
$(window).trigger( "hashchange" );

function onBefore() { 
            var title = $(this).find('h1').html();
            $('#caption') 
            .html(title); 
        };

});


function setSlide(index) {
            $('.images').cycle(index);
        }

Answer 1

对于任何有兴趣的人我都想到了这一点。在上面的代码中，您需要更改它：

function setSlide(index) {
        $('.images').cycle(index);
    }

到此：

function setSlide(index) {
            $('.images').cycle(index);
             window.location.hash = "slide-"+ (index) + ""; 
             return false;
        }

然后继续使用以下内容创建内部链接，根据您要链接的幻灯片更改数字

<a href="javascript:setSlide(1)"></a>

Jquery循环插件：如何从幻灯片中链接并在URL中反映幻灯片编号

1 个答案: