CoolBanner,原创Banner焦点图切换类,滚动切换,附带元素动画切入,动感科技感

需求:

Banner焦点图滚动十分流行,我希望把图片与文字分离,先滚动图片再切入文字,这样更富动感和科技感。当然已经有不少网站采用类似的形式,但缺少规范的类。于是,决定动手写一个,而且采用html代码作为元素,使用得当,可支持所有子元素。支持切换时间、动画时间、动画速度自定义。

使用说明:

  1. 调用jquery(1.4.3以上的版本)及coolbanner类

  2. 定义容器

     <div id="BannerSlider"></div>
    
  3. 创建滚动对象并初始化

     <script type="text/javascript">
     var bannerSlider=new CoolBanner("BannerSlider",800,400,[
         {
             mainimg: "images/banner_01.png",
             elements: [
                 {
                     html: "<span style='font-size:36px;color:#fff;font-weight:bold;'>动感banner演示</span>",
                     begincss: {top:'500px',left:'200px'},
                     endcss: {top:'50px',left:'80px'},
                     delay: 500,
                     speed: 1000
                 },
                 {
                     html: "<span style='font-size:24px;color:#fff;'>by COoL</span>",
                     begincss: {top:'500px',left:'500px'},
                     endcss: {top:'340px',left:'600px'},
                     delay: 1500,
                     speed: 1000
                 }
             ],
             stay: 4000
         },
         {...}
     ],{});
     </script>
    

参数意义注释:

参数依次是:容器ID,宽度,高度,数据,选项设置;

数据是一个json数组,每个子json是一个图片类,mainimg是主图,stay是停留时间,elements是子元素的json数组;

每个子元素都可设置:

  • html:html代码,
  • begincss:开始css,
  • endcss:动画至结束css,
  • delay:比主图片切入延后触发时间,
  • speed:animate的时间,1000为1秒,数值越小速度越快

项目链接:https://bitbucket.org/coolhihi/coolbanner

演示地址:

http://demo.gxxsite.com/coolbanner/index.html
http://demo.gxxsite.com/coolbanner/index_2.html

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏