Designsor

废话不多说，先看图吧。

然后是预览地址：一个是译言的首页滚动展示，直接看http://www.yeeyan.org/ 另一个的预览地址:http://www.designsor.com/demo/jquey/jquerypic.html

之前帮朋友做的2个轮播JS吧，大家都很常见的效果，图片滚动切换，图片渐隐切换，随时间滚动，停止，转换。大概的门户站都会有自己一个风格的这么个JS特效，但是我们到底有多少人，真正懂得里面的一些道理呢，可能更多的是自己找点特效代码或者Jquery Ui这种组建攒了攒，样子对了就好了，这样其实真的不好，花些时间搞懂这些常用的而又实用的功能很有必要，作为记录，下面给些小爝制作中的心得和分享。

首先，要想自己做出这种效果的门槛是，CSS HTML布局过硬，了解相对定位绝对定位原理，了解透明度CSS原理，了解JS基础的DOM知识，还有JS操作CSS的基础知识，最后是一些小的JS常用编程技巧。

如果上面你都符合，又想自己做出组合在一起的实际应用，那么往下读吧。

首先，上面2个例子，一个是左右滚动，下部指针控制且切换样式。一个是透明度渐隐，下部指针控制切切换样式。鼠标经过都停止切换，移开之后按照当前顺序继续切换。小图都可操作。

好了，以上就是这个功能的基本需求。小爝不推荐现在开始打开站酷，68，蓝色理想开始找代码。。。那样做你永远接触不到前端“开发”这个东西了，个人感觉领会了JS之后的开发才有真的乐趣。当然，现在我说的也只是皮毛。正文开始：

从需求开始想代码：
作为HTML+CSS+JS一起完成的东西，根本上是先理顺基本的思路，可能很多人会写CSS，布局完全靠想，写JS也是。我分享的完全是经验（实际代码自己去看网页源文件），那么继续，首先，布局：

根据效果图分析，快速形成布局。图片切换和JS这种特效做法很多，讲下基本的几种和优缺点：1，我目前用的，图片全部加载，代码直接铺上，快速实现功能，动画过度稳，图片无缓冲，但是开始加载时间会过长。2，XML,JSON,ARRAY数组切换，图片开始加载速度快，切换时延迟，代码稍复杂，实现功能速度比前者慢，要多写几个监听函数。3，结合PHP后端语言实现了，和前端开发没啥关系。

以上是原理，而不是直接叫你去找什么插件，什么特效代码，你要记住，所有这些都是以上原理。

下面：实现动画，首先：上下左右斜着的各种动画吧。原理：CSS随时间的变化而变化，绝对相对定位后的TOP,LEFT值变化而已。根据不同算法，加速度，减速，缓冲等均可实现。然后：透明度渐变，CSS中的透明度属性，随时间变化而变化，同理不解释。

根据不同需要，完成不同布局：
上面的2个需求不同，因为一个是左右移动，所以我选择绝对定位大容器后相对定位里面小图片，然后控制图片移动来实现切换，大容器OVERFLOW：HIDDEN；第2个因为是透明度切换，所以没必要移动的话，全部绝对定位5张图一个位置，根据时间来做不同的透明度变化，实现切换效果。

好，说到这里原理和实现方法还有代码你应该都弄好了，至于下部的指针，也就是小图片，随便你怎么去写吧。都做出HTML代码即可。

下面来说JQUERY里的封装好的几个JS事件句柄，也就是HOVER事件和CLICK事件了，JQ可以完成，JS也可以。通过DOM选择或者JQ的 $()来实现节点选择，这些是根本知识了。可以参考JS手册和JQ手册。时间函数，JS自带的SetTimeout还有清除延迟clearTimeout的用法，希望你仔细看下W3Cschool里的解释。我也不多说，了解完上面的知识，可以进行编码了。

设置标志位,JS常用小技巧。设置个全局变量保存当前图片指针状态，也就是说，当前图片切换到哪里了，我们需要记录。默认当然开始是第一个了，所以默认赋值为1。写一个切换函数function move(){},里面包含什么呢，节点的选择，你写的HTML的容器，用JS选择吧，然后做你需要做的动画效果，比如，第一个图，向左移动自己的宽度，结束。

开始封装，第一个图，用标识符代替，向左移动自己的宽度，自己的宽度，封装，向左移动的距离有了，第一次移动1*单位宽度；OK，然后标识符+1；结束。

这个函数差不多OK了。第一个操作结束，标识符移到2，嗯，时间函数,settimeout完成重复和延迟，settimeout(move,3000),函数的最后加这个代码，3秒后再次执行这个代码。哈哈，看，切换效果完成，因为标识符自增，下次执行的就是第2张图了，最后加入控制结束回归的判断，if(flg==5){flg=1}；OK不用解释了吧，里面的5可以封装的。。。

完成切换的JS了，原理就这么简单。透明度同理自己思考吧。下面是HOVER和CLICK事件了登场了，鼠标移到大容器上，我们的切换要停止，嗯，JS里是mouseover，道理一个意思，我们cleartimeout（）就可以了，里面的参数跟你上面设置的settimeout参数即可。例子：T=settimeout（move，3000）；cleartimeout（t）；嗯哼，移动上，动画切换停止了，移动走呢？我们重新运行move函数即可了么~嗯，记得一点，移动走会立刻触发move函数，我们还是依然 需要settimeout延迟出发move函数，然后一切OK！移走，移上的就都制作完毕了。封装你的代码吧，上面的例子我没有封装，只是快速实现了而已。

最后，click事件，用在改变指针，这个好办，下面的图的顺序和上面的大图肯定是对应的。那么下面的图是1，点1的时候指针赋值为1，点2赋值为2，即可。得到这些1啊2啊什么的，你需要了解FOR循环这个编程基础知识了，其实就是有5个图，我就循环5次，每次+1.值就是你要的1 2 3 4了。。。具体实现可以看我的代码，jquery里用的each函数完成的，手册里有具体例子和解释。

嗯，到这里就应该结束我们的展示图片JS的编写了。什么什么你还没有JS和jquery的CHM手册？如果每天不看几次小爝都会觉得不舒服，所以我推荐，没有的自己google搜下DOWN了开始看吧。

希望大家js越来越NB~！

Tags: jquery图片展示, jquey图片切换, js展示代码详细讲解, 前段开发

This entry was posted on 星期三, 3月 31st, 2010 at 6:01 上午 and is filed under 前端开发, 网页设计. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.