最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer。

本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图片轮播器。不仅效果很酷,而且是“女神级”的。什么?你问是不是妹子写的?这个我不知道,我说的是这个Demo中的图片都是女神呀,性感火辣,丰满妩媚……咳咳,回正题。

Demo的页面是http://alloyteam.github.io/jxanimate/想看女神的自己点吧。

看链接就知道是alloyteam的作品。你没听说过Alloyteam?Alloyteam就是腾讯负责开发WebQQ的队伍,他们有很多开源作品,比如坦克大战,AlloyImage图片处理工具。有兴趣可以访问他们的博客网站http://www.alloyteam.com/

这次的轮播器也是一个开源项目,名叫JX.Animate,看页面介绍是一个轻量级的CSS3动画库,不仅可以用JS方便调用CSS3的keyframe动画,而且还能用JS定制CSS3的动画。

以后有时间在来仔细研究这个框架库,我先找找轮播器的代码。在主页上有一个文档链接Documents,打开后可以看到有一个类叫SlideShow,这个就是图片轮播器。

直接在Chrome中查看源代码,作者很厚道,源代码没有压缩,注释也都保留着。
主文件是index.js,里面代码不多,看了一下其中和轮播器相关的有以下代码:

SlideShow.init('slide_contrainer',{imgW:640,imgH:400,
num:cardnum});
 

这句应该是初始化,第一个参数是一个div容器的名字,在index.html中可以找到这个div,里面包含了一个img(还有7个被注释了,后面解释)。
后面的参数是图片的高度和宽度,最后一个参数叫卡片数量。

SlideShow.setDonimo(default_domino);

这句是设置多米诺效果,这是作者号称的一个特色功能。原理很简单,比如有10个对象要设置动画效果,本来是10个动画一起播放,如果设置了多米诺效果,就将10个动画依次延迟一段时间播放,中间延迟的时间就是这里多米诺参数的值。

//添加更多图片
SlideShow.addImgByUrl('style/images/m2.jpg');
 

这里添加了7张新图,正是index.html页面中注释掉的图片。为什么要改呢?估计是因为如果写在html中会导致页面加载时间过长,放在js中可以实现静默加载吧。

SlideShow.next();
SlideShow.prev ();

这个就是翻页方法了,如果一直next下去会循环播放的。

轮播器的方法封装还是很简洁的。看来自己做一个轮播器并不复杂。

首先要引用若干JS文件
l  jx.all.js 
 这个据说是Web QQ的框架库,有机会研究一下
l  jxanimate.js  看名字就知道这个动画框架是基于JX的。
l  jxanimate.effects.js  这个是效果库,里面是用js定义的一些动画效果,支持扩展。
l  slideshow.js 
   图片轮播器的主文件。
l  slideshow.effects.js 
        这个是向JXAnimation中添加一些动画效果。

以下HTML和JS代码

<body>

    图片轮播器Demo

    <div id="picplayer" style="position:relative;width:300px;height:300px;">

        <img src="<A onclick="javascript:pageTracker._trackPageview('/outgoing/img.jb51.net/online/picPlayer/1.jpg');" href="http://img.jb51.net/online/picPlayer/1.jpg" jQuery110204156820542406253="44">http://img.jb51.net/online/picPlayer/1.jpg</A>">

    </div>

    <button id="prev" onclick="SlideShow.prev();">上一页</button>

    <button id="next" onclick="SlideShow.next();">下一页</button>

    <script>

        var pics1 = [

            '<A onclick="javascript:pageTracker._trackPageview('/outgoing/img.jb51.net/online/picPlayer/1.jpg');" href="http://img.jb51.net/online/picPlayer/1.jpg" jQuery110204156820542406253="45">http://img.jb51.net/online/picPlayer/1.jpg</A>',

            '<A onclick="javascript:pageTracker._trackPageview('/outgoing/img.jb51.net/online/picPlayer/2.jpg');" href="http://img.jb51.net/online/picPlayer/2.jpg" jQuery110204156820542406253="46">http://img.jb51.net/online/picPlayer/2.jpg</A>',

            '<A onclick="javascript:pageTracker._trackPageview('/outgoing/img.jb51.net/online/picPlayer/3.jpg');" href="http://img.jb51.net/online/picPlayer/3.jpg" jQuery110204156820542406253="47">http://img.jb51.net/online/picPlayer/3.jpg</A>'

            ];

        SlideShow.init('picplayer',{imgW:300,imgH:300,

            num:6}); //横竖都是6个片片

        SlideShow.setDonimo(900/6/6);  //900毫秒除以36个片片

        //添加更多图片

        for (var i = pics1.length - 1; i >= 1; i--) {

            SlideShow.addImgByUrl(pics1[i]);

        };

    </script>

</body>

代码还是挺清爽的。

不过这样运行可是什么效果都没有。。。。。。

不得已用Chrome的调试神器分析一下。结果发现是一些样式问题。必须有以下的CSS:

.slide_Img{
display: none;
visibility: collapse;
}
.card_piece{
position: absolute;
visibility: hidden;
}
.hidden{
visibility: hidden;
}
.visible{
visibility: visible;
}
#stage
{
position: relative;
top: 0px;
left: 0px;
}

感觉这些都是很基本的样式设置,直接在JS中写Style就行了。这里的封装可以再改进一下。有时间给作者提交一个pull request。

另外还有一个坑,就是一定要引用animate.css文件,因为SlideShow中引用了其中的动画,估计作者是想演示一下调用CSS动画的能力。但是如果找不到CSS中keyframe动画,不仅当前的动画播放不了,以后所有的动画都会有问题。这里的容错还需要加强一下。

推荐一款超级漂亮的HTML5 CSS3的图片轮播器的更多相关文章

  1. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  2. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  3. 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

  4. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

  5. css3 网页图片轮播的实现

    .lunbo{ height: 640px; width: 100%; background-position: -280px; margin-top: 103px; -webkit-animatio ...

  6. 推荐15款创建漂亮幻灯片的 jQuery 插件

    对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插 ...

  7. 推荐25款很棒的 HTML5 开发框架和开发工具【上篇】

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

  8. 分享9款最新超酷HTML5/CSS3应用插件

    新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看. 1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要 ...

  9. 9款大气实用的HTML5/CSS3注册登录表单

    1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

随机推荐

  1. 内网内使用https 和 使用http 建立连接的速度对比

    文字版 使用https httpstat https://10.24.101.14/cwbase/web/Login.aspx --insecure Connected to HTTP/ OK Ser ...

  2. 《统计学习方法》P179页10.22前向后向算法公式推导

  3. 如何处理UIVIew addsubview 不显示subview

    老代码: addsubview不显示uilabel -(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSIn ...

  4. toast components

    toast components https://jossmac.github.io/react-toast-notifications/ https://docs.microsoft.com/en- ...

  5. [C/C++] C++ Primer学习笔记

    记录下自己掌握不清楚的概念和用法... Day 1 endl:具有输出换行的效果,并刷新与设备相关联的缓冲区. 注:在调试程序过程中插入的输出语句都应刷新输出流,否则可能会造成程序崩溃,将会导致程序出 ...

  6. 【Python】Python文件系统功能:os模块

    1.os模块方法分类 (1)目录: chdir() 改变工作目录 chroot() 设定当前进程的根目录 listdir() 列出指定目录下的所有文件名 mkdir() 创建指定目录 makedirs ...

  7. 数据结构之二叉树java实现

    二叉树是一种非线性数据结构,属于树结构,最大的特点就是度为2,也就是每个节点只有一个左子树和一个右子树.二叉树的操作主要为创建,先序遍历,中序遍历,后序遍历.还有层次遍历.遍历有两种方式,一是采用递归 ...

  8. Java 输入/输出 反射

    Java  输入/输出   反射 输入输出和反射 一.数据流的基本概念 流一般分为 ( Input Stream ) 和输出流 ( Output Stream ) 两类,但这种划分并不是绝对的.比如一 ...

  9. Qt——容器类(译)

    注:本文是我对Qt官方文档的翻译,错误之处还请指正. 原文链接:Container Classes 介绍 Qt库提供了一套通用的基于模板的容器类,可以用这些类存储指定类型的项.比如,你需要一个大小可变 ...

  10. AtCoder Grand Contest 004

    AtCoder Grand Contest 004 A - Divide a Cuboid 翻译 给定一个\(A*B*C\)的立方体,现在要把它分成两个立方体,求出他们的最小体积差. 题解 如果有一条 ...