自动滚动幻灯片脚本

Autoscrolling slide javascript

本文关键字：脚本 幻灯片 滚动      更新时间：2023-09-26

我有这个我下载的滑块的javascript代码，但不知道如何使其自动滚动！我实际上是从 http://tympanus.net/Tutorials/FullscreenSlitSlider/index2.html 下载了这段代码它实际上不包含下一个按钮，因此我可以像其他滑块一样添加一个间隔:(

$(function() {
    var Page = (function() {
        var $nav = $( '#nav-dots > span' ),
        slitslider = $( '#slider' ).slitslider( {
            onBeforeChange : function( slide, pos ) {
                $nav.removeClass( 'nav-dot-current' );
                $nav.eq( pos ).addClass( 'nav-dot-current' );
            }
        } ),
        init = function() {
            initEvents();
            setInterval(initEvents,1000);
        },
        initEvents = function() {
            $nav.each( function( i ) {
                $( this ).on( 'click', function( event ) {
                    var $dot = $( this );
                    if( !slitslider.isActive() ) {
                        $nav.removeClass( 'nav-dot-current' );
                        $dot.addClass( 'nav-dot-current' );
                    }
                    slitslider.jump( i + 1 );
                    return false;
                } );
            } );
        };
        return { init : init };
    })();
    Page.init();
 });

就像它在文档中所说的（谷歌很有帮助）： 

slitslider = $( '#slider' ).slitslider({
    autoplay : true
});

应该这样做。

如果您不想阅读整篇文章，以下是常见配置选项的简短列表： 

$.Slitslider.defaults   = {
// transitions speed
speed : 800,
// if true the item's slices will also animate the opacity value
optOpacity : false,
// amount (%) to translate both slices - adjust as necessary
translateFactor : 230,
// maximum possible angle
maxAngle : 25,
// maximum possible scale
maxScale : 2,
// slideshow on / off
autoplay : false,
// keyboard navigation
keyboard : true,
// time between transitions
interval : 4000,
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : function( slide, idx ) { return false; }
};
相关文章：