jcarousel - 我如何使輪播中的圖像鏈接保持活動狀態

Question

已經成功添加jcarousel來瀏覽我的html網站，它是用動態模板構建的。不過，我需要一個圖像鏈接，當我在它所鏈接的頁面上時顯示爲活動狀態，以便觀衆知道它們在哪裏。此外，無論何時我進入新頁面，當我需要它停留在最後的位置時，jcarousel會回到其滾動位置的開頭。希望這是有道理的。我在這裏找到了一個很好的演示，我已經下載了，但無法從演示中的圖像庫中移除想要的元素。 http://blog.themeforest.net/tutorials/how-to-integrate-the-jquery-galleria-and-jcarousel-plugins/ 希望你能幫助！

Answer 1

像這樣的東西應該讓你開始。

編輯

這裏是一個更完整的例子。現在，起始值從您的網址中提取。

例如，如果您的網站的URL是www.mysite.com/page2.html，您可以添加可通過JavaScript訪問的URL參數（本例中爲'startVal'）。

因此，您的網址看起來像「www.mysite.com/page2.html?startVal=2」，其中startVal = 2確定傳送帶中​​的哪個項目設置爲選定的開始項目。

<script type="text/javascript"> 

var $sel = null; 
$(document).ready(function() { 

    // This function helps pull out items from your URL. (in this case 'startVal') 
    $.urlParam = function (name) { 
     var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); 
     if(results == null){ //if results is null then return "0" 
      return 0; 
     } 
     return results[1] || 0; 
    } 

    //Get the value of startVal from the QueryString. (in the example below, it would return 2) 
    //EXAMPLE: www.mysite.com/page2.html?startVal=2 
    var startVal = parseInt($.urlParam('startVal')); 

    $('#mycarousel').jcarousel({ 
     start: startVal //Use the value of startVal to determine which item the carousel should default to on page load. 
    }); 

    //Get the image you wish to default as selected, again we do this based off the startVal we received from the URL 
    $sel = $('#mycarousel li:nth-child(' + startVal + ')').find('img'); 
    $sel.css('border', 'solid 2px blue'); //Here we can format it however we want 

    //This function assigns a click event to each item in the carousel and changes which one is selected. 
    $('#mycarousel img').click(function() { 
     $sel.css('border', 'solid 0px white'); 
     $(this).css('border', 'solid 2px blue'); 
     $sel = $(this); 
    }); 
}); 

</script> 

編輯

您還需要在自己的驗證補充。現在，我不檢查「startVal」是否爲空，或者請求的開始索引位於可用項目的範圍內。

編輯

因此，對於網站上的每個網址，你需要添加一個查詢字符串參數來確定選擇哪個在旋轉木馬項目。

實例：

• www.mysite.com/page1.html?startVal=1
• www.mysite.com/page2.html?startVal=2
• www.mysite.com/ page3.html？startVal = 3
• www.mysite.com/page4.html?startVal=4

你需要確認所請求的項目確實存在。否則，如果URL請求項目編號698（www.mysite.com/page4.html?startVal=689）它將不存在，您可能會收到錯誤。

並不意味着使這個更混亂，但我希望這增加了一些清晰度。