网页图片轮播特效插件篇

要实现网页推案轮播一定要使用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步回到网页，我们就会看到特效。

//第一段代码开始

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/<span class="wp_keywordlink_affiliate"><a href="http://xiaoke.name/tag/jquery" title="查看 jquery 中的全部文章" target="_blank">jquery</a></span>/1.6/jquery.min.js"></script>

<script type="text/javascript" src="./js/jquery.cycle.lite.js"></script>

//第二段代码开始

<div id="slider">

<div class="show1"></div>

<div class="show2"></div>

<div class="show3"></div>

<div class="show4"></div>

</div>

//第三段代码开始

#slider{

clear:both;

height:450px;

width:600px;

padding:0;

margin:0 auto;

z-index:0;

clear:both;

display:block;

}

.show1{

backgrounnd:url("img/1.jpg") no-repeat scrool 0 0 transparent; padding:0;

height:450px;

width:600px;

top:0;

left:0;

}

.show1{

backgrounnd:url("img/2.jpg") no-repeat scrool 0 0 transparent;

padding:0;

height:450px;

width:600px;

top:0;

left:0;

}

//第四段代码开始

<script type="text/javascript">

jQuery(document).ready(function($) {

$('#slider').cycle({

fx: 'fade', //特效 speed: 7500,

timeout: 7200,

random: 1

});

}); </script>

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可

网页图片轮播特效 插件篇

文章评论

网页图片轮播特效插件篇