因为我也不是刻意去写这个 jQuery 的无缝滚动，所以 JS 也没封装过，只提供了几个基本的参数作修改，只能仅作参考。

HTML 部分：

jQuery 部分：

基本原理和使用方法都写在注释里了，我也就不多作解释了。最后说一句，google、百度上搜一下就知道，已经有大把大把写好的横的竖的无缝的滚动，总有一款适合你，但是我觉得，只有自己亲自写的才最适合自己的需要，所以就有了以上代码。

相信大多数同学，包括我在内，用到的图片 HighSlide 效果都是用的 WordPress 的插件，或者引的 jQuery 的插件，但是这必竟不能完全满足我的需求，而且在我看来那些 JS 也太庞大了一些，还不如自己写一个。做了一个简单的 DEMO，大家可以看一下。

如果你会用 Firebug 这样的工具，就可以看到，页面中所有的图片，包括 DOM 节点，都是通过 JS 注入进来的，而且在初使化的时候只生成当前显示的五组图片，只有当用户点击下一张或者点击图片放大时，才会有新的图片和节点加载进来，同样，如果用户不点击，就不会去加载。这就大大节省了初使化需要加载的图片数量。

在 JS 没有压缩之前，也只有区区 6K 的大小，所以我相信这是大多数用户和站长都能够接受的，不过虽说只有 6K，也有近 200 行的代码，篇幅有限，我就不把具体的 JS 和 CSS 贴出来了，有需要的朋友可以直接下载我的 DEMO，DEMO 里的 JS 没有压缩，注释也都写的比较清楚。

最终效果和现在我用的差不多，但是代码却千差万别，细节决定成败，争取做好每一个细节！

关于幻灯轮播图，想必大家都不陌生，尤其是基于 jQuery 的，插件、代码网上一搜一大堆，但是真正符合自己需求的几乎没有，所以我要打造一个符合自身需求，经得起广大网民考验的 jQuery 轮播图！

思路

为什么说网上其他一些轮播图不符合我的要求？我的需求又是什么呢？

现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是，先把图片和链接的 HTML 写好，然后控制隐藏和显示来轮流展示当前的幻灯图片。但是对用户而言，我们始终只是看到当前的一张图片，那其他几张隐藏的图片为什么要事先加载进来呢？这不是费时费力吗？所以我的第一个需求是按需加载。

我们一般会把轮播图放在首页展示，但是首页的重点内容应该是最近更新的文章，至少我不认为图片展示功能需要被搜索引擎收录，所以我的第二个需求是符合  SEO。

实现

冲着以上两个需求，我做了一个 DEMO，这个 DEMO 和我现在的首页看起来效果基本一致，但实现的方法却天差地别。大家不妨看看这个 DEMO 的源代码，发现区别了吗？是的，在这个 DEMO 的 HTML 源代码中，你看不到任何的图片和相关信息，都由 JS 载入进来的，也就是说爬虫爬不到，而且是随着图片的切换，一张一张地载入当前的幻灯图片。

这里我就只分享一下我的 JS 写法，HTML 什么就请各位看源码吧，代码我就不一一细说了，注释也都写得很明白了。

优势

同样的效果，只是实现方法不同？会不会很蛋疼？这有什么优势呢？

举个例子来说，优化前，假设首页切换的幻灯图片有5张，平均每张图片20K，也就是说你的首页至少要加载100K的图片，而这100K的图片你能保证每个用户都会去看吗？如果用户不看，岂不是白白浪费了这100K的载入速度？

优化后，在首页初次载入的时候，仅需加载一张1K左右的，甚至是可有可无的 loading 图片，当用户点击下一张或者达到定时器的设置时才会去加载下一张图片，大大节省了载入的时间。1K？100K？你懂的。

另外，用 JS 载入所需的图片还有一个好处，就是在一些不支持 JS 的手机浏览器上，载入 100K 的图片对于无法切换的轮播图而言，是一个极大的累赘，而且也会大大降低用户体验。

好了，大家各取所需吧，我也只是提供了一个思路，如果有更好的实现方法欢迎与我交流。

这个思路很不错，但是用 YUI 的童鞋毕竟是少数，我想 jQuery 应该也有类似的方法来处理异步跨域请求，果然，让我找到了 jQuery 的 getScript 方法，和 YUI 的 YAHOO.util.Get.script  有异曲同工之妙。就做了一个简单的 DEMO。

首先，先定义好最终要调用的数据格式：

这就是所谓的 JSONP，把数据以 JSON 的格式保存在一个对象中，方便我们之后去引用这个对象。

然后，我们就可以用 getScript 的方法去异步加载刚才保存的 JS，并处理返回结果，方法如下：

保存以上两个文件，在本地运行就能看到效果，当然，不要忘记加载 jQuery。

后记：

1、写习惯了原生的 JS，难得记录一下 jQuery，还真有点不习惯。

2、已经有童鞋再三催促我更新，再不写些东西，自己都觉得不好意思。

之前写过一些弹出层的效果，也都是借助于别人开发好的 jQuery 插件，这些插件的优点是参数多、功能全、方便调用，但是不可避免地会导致插件脚本过于庞大，很多功能基本用不到，感谢任平生童鞋一语惊醒梦中人，其实弹出的对话框层用 jQuery 来实现是相当简单的，简单到只需要两句 JS，一句是弹出，另一句就是关闭。省去了很多不必要的冗余的功能和 JS 代码。

先来看一下 DEMO，再来看一下代码有多简单：

1、首先是 HTML 部分：

2、然后是 CSS 部分：

因为我们一般要求弹出层相对于浏览器窗口垂直水平居中，而且可以跟随滚动条下拉而下移，所以我这里用了 position:fixed; 但是 IE6 总是比较杯具，偏偏不支持这么一个 CSS，无奈我用了 position:absolute; 来对付 IE6，不过这也只能勉强解决这一 bug，因为 position:absolute 只能把弹出层固定在第一屏的垂直居中位置，而无法随滚动条下移，具体如何解决 fixed 这个 IE6 的 bug 在这里就不多费口舌了。

3、JS 部分，当然必需先加载 jQuery：

好了，就是这样，算是一个超精简的弹出层效果吧，其中去掉了拖动效果和定时关闭等我认为不需要的代码，因为我需要的网站上只有一个弹出对话框，也没有考虑扩展性什么的，能省则省吧，管用就行，希望也能对你有用。

先看一个我精简出来的 DEMO。然后再来分解一下：

一、首先还是 HTML 部分：

二、然后是 CSS 部分：

三、js 部分（先加载 jQuery，这个就略过了，你懂的）：

这样就完了，总觉得 JS 部分还可以精简，但是实在想不出来了。写以上代码的时候正顶着39.8度的高烧，估计在逻辑上会有些迷糊，原谅我吧，不写两行代码，我实在睡不下去，今天已经请了一天假了，但愿明天写代码的时候不用再含着体温计了。 >_<|||

任平生GG 用的是 jQuery 实现的图片异步加载，而我整理了一下，又折腾了一个 JavaScript 版的图片异步加载效果，两者原理是一样一样的，先请看 DEMO。

在上代码之前先说一下简单的原理，我们知道在 img 标签中的 src 属性是指向图片地址，要实现异步加载，就先暂时不给 src 属性赋值，而是先找个中间变量的属性 data-src，把图片地址写在 data-src 属性里，然后当触发 onclick 事件的时候，把 data-src 的值复制给 src，也就实现了异步加载。

代码时间到，因为无论是 jQuery 还是 JavaScript 的方法，HTML 的结构是相同的，如下：

先上 jQuery 的方法：

再比较一下 JavaScript 的方法：

再来玩一下这个 DEMO，按照这个原理，发现自己写一个 lazyload 的 jQuery 插件也并不是很难嘛，哈哈～

比如说有这样一个实际的问题：有一段带有 HTML5 标签的 blah...blah...blah 要通过 AJAX 加载到当前页面中，但是我们知道为了 HTML5 标签能在 IE 下正常渲染，必须把  HTML5 Shiv 这段脚本置于 head 里，让 IE 在解析标签之前先对新元素有个认识。如此一来，后期通过 AJAX 加载的 HTML5 标签自然不会被渲染到，这样在 IE 下又会产生新的杯具，不停的 AJAX，就是不停地杯具，我勒了个去的~

我想了很多馊主意去兼容它，比如说把 document.createElement() 放到 AJAX 输出的内容中去；又比如说把 HTML5 标签从 AJAX 内容放到 jQuery 中加载……但是一切的一切都是徒劳，没有根本性解决问题，始终得不到满意的答案。还是攀帅先我一步找到了答案——HTML 5 innerShiv。当我看到这个名字的时候，我就知道有救了，我要的就是 inner 这个感觉，哈哈。

--------------- 以上是废话的分割线 ---------------

无论是 Google 还是百毒，居然都没有找到关于 innerShiv 的中文文档，好吧，我相信总有需要它的朋友，我就花了点时间翻译一下，因为水平有限，难免有误，欢迎指正。如下：

HTML 5 innerShiv

即使使用 Shiv（万戈注：就是指 HTML5 Shiv 脚本），以下代码在 IE 下仍无法正常工作：

为此，HTML 5 innerShiv 脚本（本文的主角登场）提供了一个解决方法：

出现的问题：

举例来说，一个页面的文档中包含以下样式：

如你所见，section 标签被灰色的边框包起来了，在 the HTML 5 shiv 的帮助下，甚至 IE 都能实现这个效果。

然而，当一个页面加载了 shiv 脚本，而在此之前，有一个元素的内容用 innerHTML 追加到页面中，那 shiv 脚本在 IE 浏览器下就是无效的。这是一种常见的情况，显然，当你调用 jQuery 这类库时，使用 append 或者 load 等方法载入 HTML5 内容也是同样不行的，例如：

例一：不完整的 section 标签

照理来说，这个 section 元素应该有一条灰色边框。但是在 IE 浏览器中却没有

解决方法：

innerShiv 是一个函数，它可以接受你的 HTML 字符串，将它作为一个隐藏的附加文档添加到 IE 浏览器中，并返回一个 IE 下安全的文档片段或集合。

例二：成功定义样式的 section

照理来说，这个 section 元素应该有一条灰色边框。事实上它确实有！甚至在 IE 下也有！哦耶~

innerShiv 不需要 jQuery 或者其他库。因为它返回的是文档碎片，你可以用 appendChild 或者其他的方法追加它的返回值。

例三：看吧，不需要 jQuery

用 appendChild 来追加 section 元素的内容。

用 jQuery 的注意事项

当你用 innerShiv 创建了一个 jQuery 对象，你应该传递给第二个参数一个 false 的布尔值，用来指示 innerShiv 返回一个数组元素，而不是一个文档片段。

这可以让你在文档中插入内容之前做进一步的操作。

例四：返回节点，而不是一个片段

用 jQuery 使 section 元素被 innerShiv 控制。

有一个常见的问题，如果使用 jQuery 的 load() 方法调用 innerShiv。这种想法提供了一个替代的方法，loadShiv()，它是基于 jQuery 的 load() 方法，但是通过 innerShiv 在 DOM 中添加任何内容之前引入 HTML。单独下载 loadShiv，把它加载到你的项目中去，然后用 loadShiv() 替换 load() 即可。

下载：

innershiv.js - 未压缩版本   innershiv.js.min - 压缩版本

原文地址：http://jdbartlett.github.com/innershiv/

呼呼，完毕，翻译文档真是一件累人的活，以后没事尽量少干。

我直接把首页右侧案例展示的拖动模块提取出来做了一个 DEMO，为了避免 JS 上的混淆，我把案例展示部分的点击放大效果去掉了，只留下单纯的 jQuery 拖动效果。下面是分解过程：

一、HTML 部分

二、脚本部分

这是本文的重点了，首先要挂一个 jQuery，这就不多说了。然后还要挂一个 jQuery UI 的组件，关于 jQuery UI 的组件介绍和下载可以点击这里，下载 jQuery UI 后，我们这里只需要其中的 ui.core.min.js 和 ui.slider.min.js 这两个。接下来在页面中依次引用以下脚本：

});
</script>

三、样式部分

这里就只提供一个参考的样式吧，或许你有更好更帅的写法。

我所能做的只是抛砖引玉，更多巧妙的用法欢迎来交流 o(∩_∩)o

又要但是了，我发现 WP-PostViews 会在除了首页之外的所有页面上加载一段 jQuery，而且会强行被放到头部加载，即使我用 wp_register_script() 定义了 jQuery 在底部执行，WP-PostViews 还会把我的 jQuery 拖到顶部去。当然这个不会影响最终的执行效果，但是根据 Yslow 的建议，我们最好是把 jQuery 之类的脚本放到底部加载，这样可以加快页面载入的速度。研究了一下 WP-PostViews 插件的代码，发现了其中的奥妙，在 wp-postviews.php 的第59行中，add_action('wp_head', 'process_postviews'); 看到没 wp_head，我就说呢，怎么老是给我提到顶部去，把这里的 wp_head 改成 wp_footer 就可以了。

再再但是，不管怎么样，我都不建议修改插件，因为如果插件今后一旦有升级，那就需要重新修改过，这也就是为什么我同样不建议修改 WordPress 源程序的原因。有什么问题，我们在自己的主题里就将其解决那是最好不过的了。既然 WP-PostViews 是通过勾子把 process_postviews() 函数勾进去的，那我们完全可以注销这个勾子，重新定义到底部嘛。方法如下，把以下代码复制进你 WordPress 主题的 functions.php 文件中：

代码如此简单，我就不解释了。现在再来看看页面，功能一切照常，而 jQuery 可以放到底部来执行了，速度上就可以更快一筹。

最后的但是，使用此方法加快页面速度有两个前提：

1、你的所有脚本本来就是放在底部的，否则的话，jQuery 的执行脚本在头部，而 jQuery 库被放到底部来执行，那样顺序就错了，适得其反。

2、确保你的 footer.php 里有 wp_footer() 这个函数，否则勾子没地方挂，用这个方法也是白搭。

建议两类童鞋可以试用此方法：

1、和我一样是速度控的童鞋，为了一点点速度上的优化不则手段。

2、和我一样是代码控的童鞋，为了一点点功能上的优化不则手段。