让Jquery幻灯片自动播放？

Question

好的，所以我在这里找不到任何对我有用的东西。也许我把它放在错误的代码中，因为我刚刚开始使用jQuery。我假设你以某种方式使用'true'，但我只是不理解它。这是我的代码：

        <div id="slider" class="sl-slider-wrapper">

            <div class="sl-slider">

                <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-1"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Luxury fully appointed one bedroom apartments.</cite></blockquote>
                    </div>
                </div>

                <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-2"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Upstairs apartments feature vaulted ceilings and a sunny outlook.</cite></blockquote>

                    </div>
                </div>

                <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-3"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Built using natural materials including concrete, schist facings, steel and double glazed argon filled glass. </cite></blockquote>
                    </div>
                </div>

                <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-4"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Kitchens feature stone bench tops, quality stainless steel appliances including tall dish drawer, fan forced oven, ice and water dispensing fridge/freezer.</cite></blockquote>
                    </div>
                </div>

                <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-5"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Quality soft furnishings and floor coverings provide a warm and luxurious environment, even through Dunedin's chilly winters.</cite></blockquote>
                    </div>
                </div>
            </div><!-- /sl-slider -->

            <nav id="nav-dots" class="nav-dots">
                <span class="nav-dot-current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </nav>

        </div><!-- /slider-wrapper -->

        <div class="content-wrapper">

        </div>

    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="FullscreenSlitSlider/js/jquery.ba-cond.min.js"></script>
    <script type="text/javascript" src="FullscreenSlitSlider/js/jquery.slitslider.js"></script>
    <script type="text/javascript"> 
        $(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();

                    },
                    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();

非常感谢

Answer 1

您忘记了代码的问题导入脚本modernizr.custom.79639.js

这是编辑你的代码

<div id="slider" class="sl-slider-wrapper">

            <div class="sl-slider">

                <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-1"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Luxury fully appointed one bedroom apartments.</cite></blockquote>
                    </div>
                </div>

                <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-2"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Upstairs apartments feature vaulted ceilings and a sunny outlook.</cite></blockquote>

                    </div>
                </div>

                <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-3"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Built using natural materials including concrete, schist facings, steel and double glazed argon filled glass. </cite></blockquote>
                    </div>
                </div>

                <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-4"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Kitchens feature stone bench tops, quality stainless steel appliances including tall dish drawer, fan forced oven, ice and water dispensing fridge/freezer.</cite></blockquote>
                    </div>
                </div>

                <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <div class="bg-img bg-img-5"></div>
                        <h2>Sabina Apartments</h2>
                        <blockquote><p>Quality soft furnishings and floor coverings provide a warm and luxurious environment, even through Dunedin's chilly winters.</cite></blockquote>
                    </div>
                </div>
            </div><!-- /sl-slider -->

            <nav id="nav-dots" class="nav-dots">
                <span class="nav-dot-current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </nav>

        </div><!-- /slider-wrapper -->

        <div class="content-wrapper">

        </div>

    </div>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/FullscreenSlitSlider/js/modernizr.custom.79639.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/FullscreenSlitSlider/js/jquery.ba-cond.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/FullscreenSlitSlider/js/jquery.slitslider.js"></script>
    <script type="text/javascript"> 
       $(function() {

                var Page = (function() {

                    var $navArrows = $( '#nav-arrows' ),
                        $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();

                        },
                        initEvents = function() {

                            // add navigation events
                            $navArrows.children( ':last' ).on( 'click', function() {

                                slitslider.next();
                                return false;

                            } );

                            $navArrows.children( ':first' ).on( 'click', function() {

                                slitslider.previous();
                                return false;

                            } );

                            $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();

                /**
                 * Notes: 
                 * 
                 * example how to add items:
                 */

                /*

                var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');

                // call the plugin's add method
                ss.add($items);

                */

            });
            </script>

工作演示：http://tympanus.net/Tutorials/FullscreenSlitSlider/