2013-05-13 80 views
0

好的,我已根據評論更新了我的代碼,非常感謝。所以後退按鈕現在正在工作,但是,它已經停止了我的內部鏈接,因爲它們不再反映在URL中。以前我寫的鏈接,所以在幻燈片編號填滿:jquery循環插件:如何從幻燈片中鏈接並在網址中反映幻燈片號碼

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

這仍然是工作,但不改變URL喜歡它與malsup代碼一樣。我如何鏈接這兩個代碼位?我不是很有經驗。

非常感謝

$(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); 
     } 
+0

你應該看看window.onhashchange事件和編寫您對本 – 2013-05-13 13:40:18

+0

喜烤邏輯,謝謝你的建議,我有後退按鈕現在的工作,但它有停止我的內部鏈接(幻燈片)以註冊URL。是否有可能讓這些鏈接也具有相同的行爲?再次感謝 – Nick 2013-05-13 15:50:13

回答

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>