这是一个棘手的问题,我不知道如何解决这个问题。
我正在使用BxSlider对于一个可以像普通 slider 一样滑动图像的网站。问题是我需要一种方法来保存用户所在 slider 的最后位置,以便当他们刷新或导航到网站上的其他页面时,它不会重置回第一张幻灯片。
我的意思的图片示例:
图片(1): slider 的当前位置。
图(2):刷新或换页后 slider 的位置。
我需要 slider 从最后一张幻灯片继续,而不是重置回第一张幻灯片。
这是一个示例 JsFiddle slider 以及 HTML:
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
任何想法都将不胜感激。
最佳答案
bxSlider 提供两个选项:startSlide
和 onSlideAfter
您可以在此处查看他们的文档:Docs
然后,每次幻灯片更改时,您可以使用 localStorage.setItem()
存储当前索引,并且在加载页面时,您可以使用 检索当前索引localStorage.getItem()
.
JS:
$(document).ready(function() {
var startIndex = localStorage.getItem("currentIndex");
if(startIndex == null)
startIndex = 0;
$('.bxslider').bxSlider({
startSlide: startIndex,
mode: 'horizontal',
infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: 3000,
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
captions: true,
speed: 500,
onSlideAfter: function($slideElm, oldIndex, newIndex) {save($slideElm, oldIndex, newIndex)}
});
function save($slideElm, oldIndex, newIndex) {
console.log(oldIndex + " " + newIndex);
localStorage.setItem("currentIndex", newIndex);
}
})
fiddle :http://jsfiddle.net/Yq3RM/1264/
关于javascript - BxSlider:页面刷新/更改时保存 slider 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37395067/