Jssor画像スライダーでページをリロードした後、同じページに移動した後にクリックしたスライダーを表示する方法

Question

私のアプリケーションでJssor画像スライダーを使用しています。ユーザーがインデックス番号5の画像をクリックすると、そのユーザーは他のページにナビゲートされます。ユーザがスライダページに戻ると、インデックス番号1の画像ではなく、同じ画像（インデックス番号5の画像）が表示されます。

クリックした画像のインデックス番号を取得するためにクエリ文字列を使用しています。

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

クリックした画像のインデックス番号を取得する方法は誰にでも教えてください。

Answer 1

私はjssorを知らないので、ちょうどそれを見ました。とにかく、私の答えと衝突しないようにjssorのように見えます。

URLにインデックスを入れることができます。したがって、クライアントがリロードされると、そのインデックスを読み取り、設定します。これを行う方法は、URLに＃を入れています。 ＃の右側で変更されたものはページのリロードを引き起こさないので、これは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>