Fatal编程技术网
  • javascript/
  • 我如何调用JavaScript函数来通过以下调用自动播放幻灯片？

我如何调用JavaScript函数来通过以下调用自动播放幻灯片？

javascript jquery html css

我如何调用JavaScript函数来通过以下调用自动播放幻灯片？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个有三张幻灯片的幻灯片，它是一个四盒的幻灯片。它将第一个图像分成四个，然后出现下一个图像。单击“下一步”按钮，当前图像将分解，并出现下一个图像。它可以很好的点击，但我想自动转换图像。我尝试使用javascript的setInterval函数，但效果不好。我有来自codrops的这段代码，我正在尝试将其集成到我的网站中。请帮助我，因为我是jquery新手。我也看到了一个类似的帖子，但没用。 下面是HTML和js文件的代码 index.html <!DOCTYPE html> &l

我有一个有三张幻灯片的幻灯片，它是一个四盒的幻灯片。它将第一个图像分成四个，然后出现下一个图像。单击“下一步”按钮，当前图像将分解，并出现下一个图像。它可以很好的点击，但我想自动转换图像。我尝试使用javascript的setInterval函数，但效果不好。我有来自codrops的这段代码，我正在尝试将其集成到我的网站中。请帮助我，因为我是jquery新手。我也看到了一个类似的帖子，但没用。 下面是HTML和js文件的代码

index.html

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Four Boxes Slideshow | Demo 2</title>
    <meta name="description" content="Four Boxes Slideshow: Recreating the background image slideshow seen on Atelier Serge Thoroval's website" />
    <meta name="keywords" content="background slideshow, boxes, background image, four panels, css, tutorial" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="../favicon.ico">
    <link href='http://fonts.googleapis.com/css?family=Raleway:200,400,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script src="js/modernizr.custom.js"></script>
</head>
<body>
    <div class="container">

        <div id="boxgallery" class="boxgallery" data-effect="effect-2">
            <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
            <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
            <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
            <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
        </div>
        <header class="codrops-header">
            <h1>Four Boxes Slideshow <span>Recreating the background image slideshow seen on <a href="http://www.atelier-serge-thoraval.com/en/">Atelier Serge Thoroval's website</a></span></h1>
            <nav class="codrops-demos">
                <a href="index.html">Serge Thoroval</a>
                <a class="current-demo" href="index2.html">Lateral</a>
                <a href="index3.html">Fall</a>
            </nav>
        </header>
    </div><!-- /container -->
    <script src="js/classie.js"></script>
    <script src="js/boxesFx.js"></script>
    <script>
        new BoxesFx( document.getElementById( 'boxgallery' ) );
    </script>
</body>
</html>


四盒幻灯片|演示2
四框幻灯片重新创建上看到的背景图像幻灯片
新的BoxesFx（document.getElementById（'boxgallery'）；
boxesFx.js 这是需要查看的jquery代码

;( function( window ) {

    'use strict';

    // based on http://responsejs.com/labs/dimensions/
    function getViewport(axis) {
        var client, inner;
        if( axis === 'x' ) {
            client = docElem['clientWidth'];
            inner = window['innerWidth'];
        }
        else if( axis === 'y' ) {
            client = docElem['clientHeight'];
            inner = window['innerHeight'];
        }

        return client < inner ? inner : client;
    }

    var docElem = window.document.documentElement,
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions },
        win = { width : getViewport('x'), height : getViewport('y') };

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

    function BoxesFx( el, options ) {   
        this.el = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }

    BoxesFx.prototype.options = {}

    BoxesFx.prototype._init = function() {
        // set transforms configuration
        this._setTransforms();
        // which effect
        this.effect = this.el.getAttribute( 'data-effect' ) || 'effect-1';
        // check if animating
        this.isAnimating = false;
        // the panels
        this.panels = [].slice.call( this.el.querySelectorAll( '.panel' ) );
        // total number of panels (4 for this demo)
        //this.panelsCount = this.panels.length;
        this.panelsCount = 4;
        // current panel´s index
        this.current = 0;
        classie.add( this.panels[0], 'current' );
        // replace image with 4 divs, each including the image
        var self = this;
        this.panels.forEach( function( panel ) {
            var img = panel.querySelector( 'img' ), imgReplacement = '';
            for( var i = 0; i < self.panelsCount; ++i ) {
                imgReplacement += '<div class="bg-tile"><div class="bg-img"><img src="' + img.src + '" /></div></div>'
            }
            panel.removeChild( img );
            panel.innerHTML = imgReplacement + panel.innerHTML;
        } );
        // add navigation element
        this.nav = document.createElement( 'nav' );
        this.nav.innerHTML = '<span class="prev"><i></i></span><span class="next"><i></i></span>';
        this.el.appendChild( this.nav );
        // initialize events
        this._initEvents();
    }

    // set the transforms per effect
    // we have defined both the next and previous action transforms for each panel
    BoxesFx.prototype._setTransforms = function() {
        this.transforms = {
            'effect-1' : {
                'next' : [
                    'translate3d(0, ' + (win.height/2+10) + 'px, 0)', // transforms for 1 panel
                    'translate3d(-' + (win.width/2+10) + 'px, 0, 0)', // transforms for 2 panel
                    'translate3d(' + (win.width/2+10) + 'px, 0, 0)', // transforms for 3 panel
                    'translate3d(0, -' + (win.height/2+10) + 'px, 0)' // transforms for 4 panel
                ],
                'prev' : [
                    'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
                    'translate3d(0, ' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0, -' + (win.height/2+10) + 'px, 0)',
                    'translate3d(-' + (win.width/2+10) + 'px, 0, 0)'
                ]
            },
            'effect-2' : {
                'next' : [
                    'translate3d(-' + (win.width/2+10) + 'px, 0, 0)',
                    'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
                    'translate3d(-' + (win.width/2+10) + 'px, 0, 0)',
                    'translate3d(' + (win.width/2+10) + 'px, 0, 0)'
                ],
                'prev' : [
                    'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,' + (win.height/2+10) + 'px, 0)'
                ]
            },
            'effect-3' : {
                'next' : [
                    'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,' + (win.height/2+10) + 'px, 0)'
                ],
                'prev' : [
                    'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                    'translate3d(0,-' + (win.height/2+10) + 'px, 0)'
                ]
            }
        };  
    }

    BoxesFx.prototype._initEvents = function() {
        var self = this, navctrls = this.nav.children;

        navctrls[0].addEventListener( 'click', function() { self._navigate('prev') } );

        navctrls[1].addEventListener( 'click', function() { self._navigate('next') } );

        window.addEventListener( 'resize', function() { self._resizeHandler(); } );
    }


    // goto next or previous slide
    BoxesFx.prototype._navigate = function( dir ) {
        if( this.isAnimating ) return false;
        this.isAnimating = true;

        var self = this, currentPanel = this.panels[ this.current ];

        if( dir === 'next' ) {
            this.current = this.current < this.panelsCount - 1 ? this.current + 1 : 0;          
        }
        else {
            this.current = this.current > 0 ? this.current - 1 : this.panelsCount - 1;
        }

        // next panel to be shown
        var nextPanel = this.panels[ this.current ];
        // add class active to the next panel to trigger its animation
        classie.add( nextPanel, 'active' );
        // apply the transforms to the current panel
        this._applyTransforms( currentPanel, dir );

        // let´s track the number of transitions ended per panel
        var cntTransTotal = 0,

            // transition end event function
            onEndTransitionFn = function( ev ) {
                if( ev && !classie.has( ev.target, 'bg-img' ) ) return false;

                // return if not all panel transitions ended
                ++cntTransTotal;
                if( cntTransTotal < self.panelsCount ) return false;

                if( support.transitions ) {
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }

                // remove current class from current panel and add it to the next one
                classie.remove( currentPanel, 'current' );
                classie.add( nextPanel, 'current' );
                // reset transforms for the currentPanel
                self._resetTransforms( currentPanel );
                // remove class active
                classie.remove( nextPanel, 'active' );
                self.isAnimating = false;
            };

        if( support.transitions ) {
            currentPanel.addEventListener( transEndEventName, onEndTransitionFn );
        }
        else {
            onEndTransitionFn();
        }
    }

    BoxesFx.prototype._applyTransforms = function( panel, dir ) {
        var self = this;
        [].slice.call( panel.querySelectorAll( 'div.bg-img' ) ).forEach( function( tile, pos ) {
            tile.style.WebkitTransform = self.transforms[self.effect][dir][pos];
            tile.style.transform = self.transforms[self.effect][dir][pos];
        } );
    }

    BoxesFx.prototype._resetTransforms = function( panel ) {
        [].slice.call( panel.querySelectorAll( 'div.bg-img' ) ).forEach( function( tile ) {
            tile.style.WebkitTransform = 'none';
            tile.style.transform = 'none';
        } );
    }

    BoxesFx.prototype._resizeHandler = function() {
        var self = this;
        function delayed() {
            self._resize();
            self._resizeTimeout = null;
        }
        if ( this._resizeTimeout ) {
            clearTimeout( this._resizeTimeout );
        }
        this._resizeTimeout = setTimeout( delayed, 50 );
    }

    BoxesFx.prototype._resize = function() {
        win.width = getViewport('x');
        win.height = getViewport('y');
        this._setTransforms();
    }

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

} )( window );

；（功能（窗口）{
"严格使用",；
//基于http://responsejs.com/labs/dimensions/
函数getViewport（轴）{
var客户端，内部；
如果（轴=='x'）{
client=docElem['clientWidth']；
内部=窗口['innerWidth']；
}
否则，如果（轴=='y'）{
客户=docElem['clientHeight']；
内部=窗['innerHeight']；
}
返回客户<内部？内部：客户；
}
var docElem=window.document.documentElement，
Transandeventnames={
“WebKittTransition”：“WebKittTransitionEnd”，
'MozTransition'：'transitionend'，
“OTransition”：“oTransitionEnd”，
“msTransition”：“MSTransitionEnd”，
“transition”：“transitionend”
},
transEndEventName=transEndEventNames[现代化前缀（'transition'）]，
支持={transitions:modernizer.cstransitions}，
win={宽度：getViewport（'x'），高度：getViewport（'y'）}；
功能扩展（a，b）{
对于（b中的var键）{
如果（b.hasOwnProperty（键））{
a[键]=b[键]；
}
}
返回a；
}
函数框Fx（el，选项）{
this.el=el；
this.options=extend（{}，this.options）；
扩展（这个。选项，选项）；
这个；
}
BoxesFx.prototype.options={}
prototype.\u init=function（）{
//设置转换配置
这个；
//效果如何
this.effect=this.el.getAttribute（'data effect'）| |'effect-1'；
//检查是否设置动画
this.isAnimating=false；
//面板
this.panels=[].slice.call（this.el.queryselectoral（'.panel'））；
//面板总数（本演示共4个）
//this.panelscont=this.panels.length；
此.panelScont=4；
//当前专家组索引
该电流=0；
classie.add（此.panels[0]，“current”）；
//将图像替换为4个div，每个div包括图像
var self=这个；
this.panels.forEach（函数（面板）{
var img=panel.querySelector（'img'），imgReplacement=''；
对于（变量i=0；i