如何顯示在Jssor圖像滑塊頁面重新加載後導航到同一頁面後單擊的滑塊

我正在我的應用程序中使用Jssor圖像滑塊。要求是當用戶點擊索引號爲5的圖像時，用戶被導航到任何其他頁面。當用戶返回到滑塊頁面時，應該顯示相同的圖像（即索引號爲5的圖像）而不是索引號爲1的圖像。如何顯示在Jssor圖像滑塊頁面重新加載後導航到同一頁面後單擊的滑塊

我正在使用查詢字符串來獲取點擊圖像的索引號。

var sbIndex = '<%= Request.QueryString["SubIndex"]%>'; 
$('#jssor_2').$GoTo = sbIndex;

任何人都可以給我一個解決方案來獲得點擊圖像的索引號。

來源

2016-11-28 Jarvis

我不知道jssor，我只是看看它。無論如何，它看起來像jssor不應該與我的答案衝突。

您可以將索引放入網址中，因此當客戶端重新加載時，您會讀取該索引並進行設置。做到這一點的方法是在網址中加上＃。任何在＃右側更改的內容都不會導致頁面重新加載，所以這是一個很好的放置javascript的變量的地方。

讓我示範一個簡單的原理例子。這是一個照片庫，照片是布魯塞爾豆芽。

<div id="buttons"></div> 
<img id="image" src=""> 
<script> 
// these are images of Brussels Sprouts 
var images = [ 
    'https://d2t35vvdhj0e6p.cloudfront.net/m/i/brussels_sprouts.jpg', 
    'http://www.polskafoods.com/sites/all/sites/default/files/images/brussels-sprouts-polish-recipe.jpg', 
    'http://www.onlyfoods.net/wp-content/uploads/2013/05/Brussels-Sprouts.jpg', 
    'http://www.qvm.com.au/wp-content/uploads/2013/04/Brussel-Sprouts.jpg', 
    'https://www.smartkitchen.com/assets/images/resources/large/1281295928Brussels%20Sprouts.jpg' 
]; 

function generateButton(index) { 
    return '<input type="button" value="' + index + '" onclick="goto(' + index + ')" />'; 
} 
function goto(index) { 
    if(images[index]) { 
    // set the url 
    location = '#' + index; 
    // set the image source 
    document.getElementById('image').src = images[index]; 
    } 
} 
window.onload = function() { 
    var index = 0; 
    // check if any index is in the url 
    if(Number(location.hash.substr(1))) { 
    index = Number(location.hash.substr(1)); 
    } 
    var buttons = ''; 
    for(var i in images) { 
    buttons += generateButton(i); 
    } 
    document.getElementById('buttons').innerHTML = buttons; 
    goto(index); 
} 
</script>

來源

2016-11-28 16:36:42

如何顯示在Jssor圖像滑塊頁面重新加載後導航到同一頁面後單擊的滑塊

回答

相關問題