Функция запуска через некоторое время в jquery и автоматическая нарезка изображений

0

Я не могу начать автоматическую сортировку изображений, это происходит только после щелчка, как мне изменить свой код, чтобы я мог автоматически менять разрез изображений через некоторое время (например, 5 секунд).

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Slicebox - 3D Image Slider</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Slicebox - 3D Image Slider with Fallback" />
        <meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" />
        <meta name="author" content="Pedro Botelho for Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/slicebox.css" />
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
        <script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
    </head>
    <body onload="funct()">
        <div class="container">

            <div class="codrops-top clearfix">
                <a href="http://tympanus.net/Development/AutomaticImageMontage/"><span>&laquo; Previous Demo: </span>Automatic Image Montage</a>
                <span class="right">
                    <a target="_blank" href="http://www.flickr.com/photos/strupler/">Images by <strong>ND Strupler</strong></a>
                    <a href="http://tympanus.net/codrops/?p=5657"><strong>Back to the Codrops Article</strong></a>
                </span>
            </div>

            <h1>Slicebox <span>A fresh 3D image slider with graceful fallback</span></h1>

            <div class="more">
                <ul id="sb-examples">
                    <li>More examples:</li>
                    <li class="selected"><a href="index.html">Example 1</a></li>
                    <li><a href="index2.html">Example 2</a></li>
                    <li><a href="index3.html">Example 3</a></li>
                    <li><a href="index4.html">Example 4</a></li>
                </ul>
            </div>

            <div class="wrapper" id="checkthis">

                <ul id="sb-slider" class="sb-slider">
                    <li>
                        <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/1.jpg" alt="image1"/></a>
                        <div class="sb-description">
                            <h3>Creative Lifesaver</h3>
                        </div>
                    </li>
                    <li>
                        <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"><img src="images/2.jpg" alt="image2"/></a>
                        <div class="sb-description">
                            <h3>Honest Entertainer</h3>
                        </div>
                    </li>
                    <li>
                        <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"><img src="images/3.jpg" alt="image1"/></a>
                        <div class="sb-description">
                            <h3>Brave Astronaut</h3>
                        </div>
                    </li>
                    <li>
                        <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"><img src="images/4.jpg" alt="image1"/></a>
                        <div class="sb-description">
                            <h3>Affectionate Decision Maker</h3>
                        </div>
                    </li>
                    <li>
                        <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"><img src="images/5.jpg" alt="image1"/></a>
                        <div class="sb-description">
                            <h3>Faithful Investor</h3>
                        </div>
                    </li>
                    <li>
                        <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"><img src="images/6.jpg" alt="image1"/></a>
                        <div class="sb-description">
                            <h3>Groundbreaking Artist</h3>
                        </div>
                    </li>
                    <li>
                        <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"><img src="images/7.jpg" alt="image1"/></a>
                        <div class="sb-description">
                            <h3>Selfless Philantropist</h3>
                        </div>
                    </li>
                </ul>

                <div id="shadow" class="shadow"></div>

                <div id="nav-arrows" class="nav-arrows">
                    <a href="#x">Next</a>
                    <a href="#y">Previous</a>
                </div>

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

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

            <p class="info"><strong>Example 1:</strong> Default settings</p>

        </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="js/jquery.slicebox.js"></script>
        <script type="text/javascript">
            $(function() {

                var Page = (function() {

                    var $navArrows = $( '#nav-arrows' ).hide(),
                        $navDots = $( '#nav-dots' ).hide(),
                        $nav = $navDots.children( 'span' ),
                        $shadow = $( '#shadow' ).hide(),
                        slicebox = $( '#sb-slider' ).slicebox( {
                            onReady : function() {

                                $navArrows.show();
                                $navDots.show();
                                $shadow.show();

                            },
                            onBeforeChange : function( pos ) {

                                $nav.removeClass( 'nav-dot-current' );
                                $nav.eq( pos ).addClass( 'nav-dot-current' );

                            }
                        } ),

                        init = function() {
                            initEvents();                           
                        },
                        initEvents = function() {

                            // add navigation events
                            $navArrows.children( ':first' ).on( 'click', function() {
                                setInterval("callme()", 1000);
                            return false;
                            } );
                            //$(function(){
                            //callme();
                            //});

                            function callme(){
                            //$('#checkit').append("callme loaded<br />");
                            slicebox.next(); 
                            setInterval("callme()", 1000);
                            }

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

                                slicebox.previous();
                                return false;

                            } );

                            $nav.each( function( i ) {

                                $( this ).on( 'click', function( event ) {

                                    var $dot = $( this );

                                    if( !slicebox.isActive() ) {

                                        $nav.removeClass( 'nav-dot-current' );
                                        $dot.addClass( 'nav-dot-current' );

                                    }

                                    slicebox.jump( i + 1 );
                                    return false;

                                } );

                            } );

                        };

                        return { init : init };

                })();

                Page.init();

            });
        </script>

        <script>
    // make sure the "myContainer" id in the script is the same id of the div
    $(document).ready(function() {
    slicebox.next();
        $('#nav-arrows').sbslider(); // this is the piece of code that will do the magic thing
    });
</script>

    </body>
</html> 

Я не могу начать автоматическую сортировку изображений, это происходит только после щелчка, как мне изменить свой код, чтобы я мог автоматически изменять разрез изображений.

  • 0
    Ищите плагин jquery-timer - очень полезно
  • 0
    но мне нужно изменить нарезку изображений, где я должен использовать таймер и как?
Показать ещё 1 комментарий
Теги:

2 ответа

0

попробуй это

onBeforeChange: function (position) {return false; }, onAfterChange: function( position ) { return false; }, onAfterChange: function (position) {return false; } }

-1
orientation : 'r',
cuboidsRandom: true,
// (v)ertical, (h)orizontal or (r)andom
//orientation : 'v',
// perspective value
perspective : 1200,
// number of slices / cuboids
// needs to be an odd number 15 => number > 0 (if you want the limit higher, change the _validate function).
cuboidsCount : 5,
// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)               
// the range of possible number of cuboids if cuboidsRandom is true
// it is strongly recommended that you do not set a very large number :)
maxCuboidsCount : 5,
// each cuboid will move x pixels left / top (depending on orientation). The middle cuboid doesn't move. the middle cuboid neighbors will move disperseFactor pixels
// disperseFactor : 0,
// color of the hidden sides
colorHiddenSides : '#222',
// the animation will start from left to right. The left most cuboid will be the first one to rotate
// this is the interval between each rotation in ms
sequentialFactor : 150,
// animation speed
// this is the speed that takes "1" cuboid to rotate
speed : 600,
// transition easing
easing :'ease',
// if true the slicebox will start the animation automatically
autoplay : true,
// time (ms) between each rotation, if autoplay is true
interval: 3000,
// the fallback will just fade out / fade in the items
// this is the time fr the fade effect
fallbackFadeSpeed: 300,                     
disperseFactor : 30

просто напишите вышеуказанные свойства после этого, он отлично работает на моем сайте...

    $navArrows.show();
    $navDots.show();
    $shadow.show();
};
  • 0
    Хотя этот блок кода может ответить на вопрос, вы всегда должны предоставить какое-то объяснение, почему это происходит.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню