推荐一款超级漂亮的HTML5 CSS3的图片轮播器

最近在学习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动画，不仅当前的动画播放不了，以后所有的动画都会有问题。这里的容错还需要加强一下。

随机推荐

VS提示“无法启动IIS Express Web服务器”的解决方法
有时在使用Visual Studio运行项目时,会提示“无法启动IIS Express Web服务器”,如图: 可以依次尝试以下方法(我的情况使用第一种就解决了): 1.可能原因:误操作执行了:Sc ...
Scrum 5.0(继4.0)
一,组员任务完成情况首页设计初步完成但是需要优化界面,只能简单的输出信息和在首页进行登录.界面极其简单. 鸡汤版面设计有困难,问题在于用何种形式来管理用户的数据上传,但是经过小组间的讨论确定设计方向 ...
开放地址法散列表ADT
数据结构定义如下: typedef unsigned int Index; typedef Index Position; struct HashTbl; typedef struct HashTbl ...
git 常用命令总结(一)
1.初始化版本库: .进入工程根目录目录 .创建项目目录 mkdir 项目目录名称 .进入创建的项目中 cd 项目名称 pwd 显示当前目录 .项目初始化 git init //完成后会在项目目录下生 ...
strtr、str_replace()、substr_replace、preg_replace之间的区别
strtr(string, from, to): 逐个字符开始替换,以from跟to中长度较较短的一个为准,例如: strtr("aidengni","ai", ...
Android中线程间通信原理分析：Looper，MessageQueue，Handler
自问自答的两个问题在我们去讨论Handler,Looper,MessageQueue的关系之前,我们需要先问两个问题: 1.这一套东西搞出来是为了解决什么问题呢? 2.如果让我们来解决这个问题该怎么 ...
【uoj#209】[UER #6]票数统计组合数+乱搞
题目描述一个长度为 $n$ 的序列,每个位置为 $0$ 或 $1$ 两种.现在给出 $m$ 个限制条件,第 $i$ 个限制条件给出 $x_i$ .$y_i$ ,要求至少满足以下两个条件之一: 序列的 ...
ldap添加memberof支持
安装请查看上一篇博客,传送门:https://www.cnblogs.com/crysmile/p/9470508.html 如果使用LDAP仅仅作为用户统一登录中心,则参考安装文档即可:如果ldap ...
P4417 [COCI2006-2007#2] STOL
题目描述米尔科买了一套别墅,他想要邀请尽量多的人和他一起庆祝.他需要一张大的木质矩形桌子来让他和他的嘉宾坐下.每张桌子可容纳的人数等于它的周长(四边长度的总和).米尔科想要买一张即可在他的公寓里放下 ...
wazuh官方安装指南（中文译版本）
安装Wazuh服务器 Wazuh服务器可以安装在任何类型的Unix操作系统上.最常见安装在Linux上.如果可以为您的系统提供自动化脚本,则安装过程会更容易,但是,从源码构建和安装也非常简单. 通 ...

推荐一款超级漂亮的HTML5 CSS3的图片轮播器

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

随机推荐

热门专题