首页学习－－banner的动画及轮播

效果请见 http://www.3zang.tech/

html

<section className="g-slide">        <div className="m-slide">            <div className="slide-img">                <ul>                    <li className="active">                        <div className="banner-img banner1-img-one">                            <img src="images/banner1-one.png" />                        </div>                        <div className="banner-img banner1-img-two">                            <img src="images/banner1-two.png" />                        </div>                        <img className="bg-img" src="images/banner1.png" width="100%" />                    </li>                    <li>                        <div className="banner-img banner2-img-one">                            <img src="images/banner2-one.png" />                        </div>                        <div className="banner-img banner2-img-two">                            <img src="images/banner2-two.png" />                        </div>                        <img className="bg-img" src="images/banner2.png" width="100%" />                    </li>                    <li>                        <div className="banner-img banner3-img-one">                            <img src="images/banner3-one.png" />                        </div>                        <div className="banner-img banner3-img-two">                            <img src="images/banner3-two.png" />                        </div>                        <img className="bg-img" src="images/banner3.png" width="100%" />                    </li>                </ul>            </div>            <div className="slide-btn">                <a href="javascript:;" className="active"></a>                <a href="javascript:;"></a>                <a href="javascript:;"></a>            </div>        </div>

js部分

banner: function(){    //首页banner焦点幻灯片            var pollingTime = this.pollingTime;            var opts = {                'time': 3000//轮播时间间隔            };            function plugin(elm, options){                var _this = this;                _this.$elm = $(elm);                opts = $.extend(opts, options||{});                _this.init();            }            plugin.prototype = {                init: function(){                    var _this = this;                    opts.idx = 1;    //初始化几秒后显示第一张图                    opts.lengths = _this.$elm.find(opts.btnBox).find(opts.btnDom).length; //长度                    //视图事件监听                    _this.handle();                },                handle: function(){                    var _this = this;                    function polling(){                        if(opts.idx >= opts.lengths){                            opts.idx = 0;                        }                        _this.$elm.find(opts.btnBox).find(opts.btnDom).eq(opts.idx).addClass(opts.activeClass).siblings().removeClass(opts.activeClass);                        _this.$elm.find(opts.imgBox).find(opts.imgDom).eq(opts.idx).addClass(opts.activeClass).siblings().removeClass(opts.activeClass);                        ++opts.idx;                    }                    function pollingTime(){                        return setInterval(polling, opts.time);                    }                    opts.timeHandle = pollingTime();                    _this.$elm.hover(function(){                        clearTimeout(opts.timeHandle);                    },function(){                        opts.timeHandle = pollingTime();                    });                    _this.$elm.find(opts.btnBox).find(opts.btnDom).hover(function(e){                        opts.idx = $(this).index();                        polling();                        clearTimeout(opts.timeHandle);                        e.stopPropagation();                    });                }            };            $.fn.hslide = function(options){                return new plugin(this, options);            }            /*banner轮播*/            $('.m-slide').hslide({                'time': pollingTime,                'imgBox': '.slide-img',                'imgDom': 'li',                'btnBox': '.slide-btn',                'btnDom': 'a',                'activeClass': 'active'            });        },

css部分

动画部分 很简单的动画效果

/*定义动画效果*/.m-slide .slide-img .active .banner1-img-one,.m-slide .slide-img .active .banner2-img-one{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}@-webkit-keyframes saAnic{from{opacity:0;left:3%;} to{opacity:1;left:5%;} }@-moz-keyframes saAnic{from{opacity:0;left:3%;} to{opacity:1;left:5%;} }@keyframes saAnic{from{opacity:0;left:3%;} to{opacity:1;left:5%;} }.m-slide .slide-img .active .banner1-img-two,.m-slide .slide-img .active .banner2-img-two{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}@-webkit-keyframes saAnid{from{opacity:0;right:3%;} to{opacity:1;right:5%;} }@-moz-keyframes saAnid{from{opacity:0;right:3%;} to{opacity:1;right:5%;} }@keyframes saAnid{from{opacity:0;right:3%;} to{opacity:1;right:5%;} }.m-slide .slide-img .active .banner3-img-one{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}@-webkit-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }@-moz-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }@keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }.m-slide .slide-img .active .banner3-img-two{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}@-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);} to{opacity:1;-webkit-transform:scale(1,1);} }@-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);} to{opacity:1;-moz-transform:scale(1,1);} }@keyframes saAni{from{opacity:0;transform:scale(0,0);} to{opacity:1;transform:scale(1,1);} }

这个抽象出来来，要看看js的基础了