Question

我在我的应用程序中使用Jssor图像滑块。要求是当用户单击索引号为5的图像时，用户将导航到任何其他页面。当用户返回滑块页面时，应显示相同的图像（即索引编号为5的图像），而不是索引编号为1的图像。

我正在使用查询字符串来获取所点击图像的索引号。

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

任何人都可以给我一个解决方案来获取被点击的图像的索引号。

Answer 1

我不知道jssor，我只是看看它。无论如何，看起来jssor不应该与我的回答冲突。

您可以将索引放在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>

如何显示在Jssor图像滑块中页面重新加载后导航到同一页面后单击的滑块

1 个答案: