如何在iosSlider中控制动画速度?

时间:2013-06-20 09:00:31

标签: javascript jquery slider jquery-ui-slider

我在我的网站上使用iosSlider。我需要改变滑块的动画速度。

我已阅读iosSlider中的文档。我发现我要使用autoSlideTransTimer来控制滑块速度。但我无法做到这一点。

这是我的JavaScript代码:

function InitImageSlider() {
$('.iosSlider').iosSlider
    desktopClickDrag: true,
    snapToChildren: true,
    infiniteSlider: true,
    navSlideSelector: '.slider .navigation li',
    onSlideComplete: function(args) {
        if(!args.slideChanged) return false;

        $(args.sliderObject).find('.slider-info').attr('style', '');

        $(args.currentSlideObject).find('.slider-info').animate({
            left: '15px',
            opacity: '.9'
        }, 'easeOutQuint');
    },
    onSliderLoaded: function(args) {
        $(args.sliderObject).find('.slider-info').attr('style', '');

        $(args.currentSlideObject).find('.slider-info').animate({
            left: '15px',
            opacity: '.9'
        }, 'easeOutQuint');
    },
    onSlideChange: function(args) {
        $('.slider .navigation li').removeClass('active');
        $('.slider .navigation li:eq(' + (args.currentSlideNumber - 1) + ')').addClass('active');
    },
    autoSlide: true,
    scrollbar: true,
    scrollbarContainer: '.sliderContainer .scrollbarContainer',
    scrollbarMargin: '0',
    scrollbarBorderRadius: '0',
    keyboardControls: true
});
}

2 个答案:

答案 0 :(得分:2)

我也在使用iosSlider,这对我有用:

$('.iosSlider').iosSlider({
        snapToChildren: true,
        scrollbar: false,
        scrollbarHide: true,
        desktopClickDrag: true,
        infiniteSlider: true,
        autoSlideTransTimer: 2000,
        navPrevSelector: '#sl-left',
        navNextSelector: '#sl-right',
        onSlideChange: slideChange,
        onSliderLoaded: slideChange,
        responsiveSlideContainer: false,
        responsiveSlides: false,
        autoSlide: true
    });

明显慢于:

$('.iosSlider').iosSlider({
        snapToChildren: true,
        scrollbar: false,
        scrollbarHide: true,
        desktopClickDrag: true,
        infiniteSlider: true,
        autoSlideTransTimer: 100,
        navPrevSelector: '#sl-left',
        navNextSelector: '#sl-right',
        onSlideChange: slideChange,
        onSliderLoaded: slideChange,
        responsiveSlideContainer: false,
        responsiveSlides: false,
        autoSlide: true
    });

所以autoSlideTransTimer对我有用!

答案 1 :(得分:0)

这是一个老问题,但从未得到回答。 您正在寻找 autoSlideTimer':5000 //其中数字表示幻灯片暂停多长时间。 您可以在jquery.iossslider.js文件中设置它。