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

Question

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

我想要的是第一个图像间隔1s然后第二个图像间隔5s等所以每个图像的间隔是不同的，时间间隔使用localstorage

这是我的代码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函数中。