jquery 图片幻灯片切换效果代码(1/2)
使用方法
1. 引入jquery库文件及jquery.ifadeslide.pack.网页特效插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义;
http://www.zzzyk.com 代码如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="js/jquery.ifadesldie.pack.js"></script>
样式文件无须引入,若使用demo中的结构,可直接将样式合并于项目页面中.建议样式自定义.
2. 在页面中调用插件并传入切换元素的参数, 若为空或未传入的参数,均按插件中的默认参数执行.例如如下代码是demo演示中的三组幻灯切换调用:
http://www.zzzyk.com 代码如下:
$(function(){
//sample-a调用---未传入任何参数,调用默认参数
$('div#slide').ifadeslide();
//sample-b调用---传入新的参数,将覆盖原有参数,未传入的使用默认值
$('div#slide_b').ifadeslide({
field: $('div#slide_b a'),
icocon:$('div.ico_b'),
hovercls: 'high_b',
curindex: 2, //索引值0起始,故此处设置为第3项高亮
interval: 2000
});
//sample-c调用---传入新的参数,将覆盖原有参数,未传入的使用默认值
$('div#slide_c').ifadeslide({
field: $('div#slide_c img'),
icocon: $('div.ico_c'),
outtime:100,
intime: 200
});
});
注意,调用插件部分须置入插件文件引用后面.
核心代码
http://www.zzzyk.com 代码如下:
;(function($){
$.fn.extend({
ifadeslide: function(options){
//插件参数初始化
var iset={
field:$('div#slide img'), //切换元素集合
icocon:$('div.ico'), //索引容器
hovercls:'high', //切换至当前索引高亮显示样式
curindex:0, //默认高亮显示的索引值,索引值为0起始
outtime:200, //元素淡出时间(ms)
intime:300, //元素淡入时间(ms)
interval:3000 //元素切换间隔时间(ms)
};
options=options || {};
$.extend(iset,options); //合并参数对象.若options传入有新值则覆盖iset中对应值,否则使用默认值.
//根据切换元素量生成对应的索引值列表并插入到切换区域中
var ulcon = "<ul>";
iset.field.each(function(i){
ulcon = ulcon + '<li>' + (i + 1) + '</li>';
});
ulcon += '</ul>';
iset.icocon.append(ulcon);
补充：网页制作,jquery 
