Question

我是从https://tympanus.net/Tutorials/TiltedContentSlideshow/

得到的

但我无法自动滑动..我尝试了一些但没有工作

我不知道如何编码，所以我可以让它自动滑动

代码：

( function( window ) {

    'use strict';

    // https://gist.github.com/edankwan/4389601
    Modernizr.addTest('csstransformspreserve3d', function () {
        var prop = Modernizr.prefixed('transformStyle');
        var val = 'preserve-3d';
        var computedStyle;
        if(!prop) return false;

        prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

        Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) {
            computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
        });

        return (computedStyle === val);
    });

    var support = { 
            animations : Modernizr.cssanimations,
            preserve3d : Modernizr.csstransformspreserve3d,
            transforms3d : Modernizr.csstransforms3d
        },
        isSupported = support.animations && support.preserve3d && support.transforms3d,
        animEndEventNames = {
            'WebkitAnimation' : 'webkitAnimationEnd',
            'OAnimation' : 'oAnimationEnd',
            'msAnimation' : 'MSAnimationEnd',
            'animation' : 'animationend'
        },
        // animation end event name
        animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function TiltSlider( el, options ) {
        this.el = el;
        // available effects for the animations (animation class names) - when a item comes in / out
        this.animEffectsOut = ['moveUpOut','moveDownOut','slideUpOut','slideDownOut','slideLeftOut','slideRightOut'];
        this.animEffectsIn = ['moveUpIn','moveDownIn','slideUpIn','slideDownIn','slideLeftIn','slideRightIn'];
        // the items
        this.items = this.el.querySelector( 'ol.slides' ).children;
        // total items
        this.itemsCount = this.items.length;
        if( !this.itemsCount ) return;
        // index of the current item
        this.current = 0;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }

    TiltSlider.prototype.options = {};

    TiltSlider.prototype._init = function() {
        this._addNavigation();
        this._initEvents();
    };

    // add the navigation to the DOM
    TiltSlider.prototype._addNavigation = function() {
        // add nav "dots"
        this.nav = document.createElement( 'nav' );
        var inner = '';
        for( var i = 0; i < this.itemsCount; ++i ) {
            inner += i === 0 ? '<span class="current"></span>' : '<span></span>';
        }
        this.nav.innerHTML = inner;
        this.el.appendChild( this.nav );
        this.navDots = [].slice.call( this.nav.children );
    };

    TiltSlider.prototype._initEvents = function() {
        var self = this;
        // show a new item when clicking the navigation "dots"
        this.navDots.forEach( function( dot, idx ) {
            dot.addEventListener( 'click', function() {
                if( idx !== self.current ) {
                    self._showItem( idx );
                }
            } );
        } );
    };

    TiltSlider.prototype._showItem = function( pos ) {
        if( this.isAnimating ) {
            return false;
        }
        this.isAnimating = true;

        classie.removeClass( this.navDots[ this.current ], 'current' );

        var self = this,
            // the current item
            currentItem = this.items[ this.current ];

        this.current = pos;

        // next item to come in
        var nextItem = this.items[ this.current ],
            // set random effects for the items
            outEffect = this.animEffectsOut[ Math.floor( Math.random() * this.animEffectsOut.length ) ],
            inEffect = this.animEffectsIn[ Math.floor( Math.random() * this.animEffectsOut.length ) ];

        currentItem.setAttribute( 'data-effect-out', outEffect );
        nextItem.setAttribute( 'data-effect-in', inEffect );

        classie.addClass( this.navDots[ this.current ], 'current' );

        var cntAnims = 0,
            // the number of elements that actually animate inside the current item
            animElemsCurrentCount = currentItem.querySelector( '.tiltview' ).children.length, 
            // the number of elements that actually animate inside the next item
            animElemsNextCount = nextItem.querySelector( '.tiltview' ).children.length,
            // keep track of the number of animations that are terminated
            animEndCurrentCnt = 0, animEndNextCnt = 0,
            // check function for the end of each animation
            isFinished = function() {
                ++cntAnims;
                if( cntAnims === 2 ) {
                    self.isAnimating = false;
                }
            },
            // function for the end of the current item animation
            onEndAnimationCurrentItem = function() {
                ++animEndCurrentCnt;
                var endFn = function() {
                    classie.removeClass( currentItem, 'hide' );
                    classie.removeClass( currentItem, 'current' );
                    isFinished();
                };

                if( !isSupported ) {
                    endFn();
                }
                else if( animEndCurrentCnt === animElemsCurrentCount ) {
                    currentItem.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
                    endFn();
                }
            },
            // function for the end of the next item animation
            onEndAnimationNextItem = function() {
                ++animEndNextCnt;
                var endFn = function() {
                    classie.removeClass( nextItem, 'show' );
                    classie.addClass( nextItem, 'current' );
                    isFinished();
                };

                if( !isSupported ) {
                    endFn();
                }
                else if( animEndNextCnt === animElemsNextCount ) {
                    nextItem.removeEventListener( animEndEventName, onEndAnimationNextItem );
                    endFn();
                }
            };

        classie.addClass( currentItem, 'hide' );
        classie.addClass( nextItem, 'show' );

        if( isSupported ) {
            currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem );
            nextItem.addEventListener( animEndEventName, onEndAnimationNextItem );
        }
        else {
            onEndAnimationCurrentItem();
            onEndAnimationNextItem();
        }
    };

    // add to global namespace
    window.TiltSlider = TiltSlider;

})( window );

非常感谢您的帮助！

Answer 1

请在您的脚本中添加以下代码。

$（document）.ready（function（）{new TiltSlider（document.getElementById（＆＃39; slideshow＆＃39;））; window.setInterval（function（）{$（＆＃39; nav＆gt; .current＆＃39;）。next（）。触发器（＆＃39;点击＆＃39;）; if（$（＆＃39; nav＆gt; .current＆＃39;）。next（）。index（）==＆＃ 39; -1＆＃39;）{$（＆＃39; nav＆gt; span＆＃39;）。触发器（＆＃39;点击＆＃39;）;}}，5000）;}）;

这决定了跨度的点击功能。

您可以设置的滑块的速度＆gt; 5000＆lt;。

如何使我的jquery倾斜滑块自动？

1 个答案: