Question

我想让滑块使用bxslider，以便每个图像的间隔不同，并且时间间隔也使用localstorage，但是我的代码似乎是错误的。

我想要的是第一个图像间隔1s，然后是第二个图像间隔5s，依此类推，因此每个图像的间隔不同，时间间隔使用本地存储

这是我的代码jsfiddle.net/noval_id/4qbs5jw0/

Answer 1

您没有得到多个延迟，因为您没有再次运行函数，如果要使用不同的延迟值，则必须针对存储在数组中的不同延迟值一次又一次地运行它。

$(document).ready(function (){
var startIndex = localStorage.getItem("currentIndex");

if (startIndex == null)
  startIndex = 0;

var ImagePauses = [1000,30000,2000,9000,12000,15000];
var slider = $('.bxslider').bxSlider();
modifyDelay(0)

function modifyDelay(startSlide){
    slider.reloadSlider({
        mode: 'horizontal',
        infiniteLoop: true,
        auto: true,
        autoStart: true,
        autoDirection: 'next',
        autoHover: true,
        pause: ImagePauses[startSlide],
        autoControls: false,
        pager: true,
        pagerType: 'full',
        controls: true,
        captions: true,
        speed: 500,
        startSlide: startSlide,
        onSlideAfter: function($el,oldIndex, newIndex){
            modifyDelay(newIndex) // here run it again with new index
            save($el, oldIndex, newIndex)
        } 
    });
}
});
function save($el, oldIndex, newIndex) {
  localStorage.setItem("currentIndex", newIndex);
}

还将您的jquery代码包装在$(document).ready函数中。

如何使每个图像的间隔bxslider以及时间间隔不同，请使用localstorage

1 个答案: