网页图片轮播特效 插件篇

要实现网页推案轮播一定要使用flash吗？其实不然，wordpress中直接用jquery就可以解决，打到我们想象的特效。很简单，配合上一个插件【jQuery Cycle Plugin】这个问题就很简单了，而且也很顺畅，不必为了flash在某些地方播放不起来的尴尬。

很多网站逐渐透过jQuery来取代Flash的一些特效，再加上现在HTML5是趋势，很多东西都是透过JS并搭配HTML5来时做的，大家或许会担心浏览器对Javascript处理的效能，别担心，现在各家浏览器的开发重点大多着重在Javascript的处理效能上，所以在网站跑JS不会再跟以前一样非常的吃电脑资源了，而且速度也快很多呢！

插件名字：jQuery Cycle Plugin
插件介绍：http://jquery.malsup.com/cycle/
下载地址：http://jquery.malsup.com/cycle/download.html

第1步  首先，网页要加载2个js，也就是jquery。载入的顺序尽量不要调动，否则很可能发生错误。代码请加入到</head>标签之前。见底部第一段代码

第2步  接着在网页的body内加上以下代码，其中的<div class="show"></div>是采用css背景图片的方式呼叫出图片，如果你习惯用img语法，那你也可以全部改成img语法输出图片，这样可以简化CSS的部分，但相对的html页面就会比较多代码(在此只先使用4张图片轮播)。见底部第二段代码

第3步  接着就要准备4张图片(图片大小为600*450)，再来我们要写CSS了。接着请按照下方代码写入入第一段的#sider的CSS，对应到HTML的<div id="slider">语法中设定了区块的高和宽；接着下方的.show1这边对应的就是<div class="show1″>因为我们上面设定show1~show4，所以需要设定四个，在此只展示.show1和.show2。CSS代码见底部第三段代码

第4步 接着，我们需要设定图片轮播的速度与特效，如果特效使用fade，那就在</head>标签之前加上以下代码：见底部第四段代码

第5步  回到网页，我们就会看到特效。