1、淡入淡出自动切换的图片幻灯切换效果（html 代码，css 样式，javascript）可用于网页的图片滚动新闻1.效果预览：2.代码部分：（将一下代码复制粘贴到记事本中，把后缀改成.html）三个 jQuery 版淡入淡出自动切换的图片幻灯切换效果 _与之间/* 基于 jQuery 1.4 的渐入渐出切换幻灯插件* Plugin Page:http:/ Author Mr.Think* Author blog http:/ Creation date: 2010.08.20*/*reset css*/bodyfont-size:0.8em;letter-spacing:1px;font-fa
2、mily:“MS Sans Serif“,Geneva,sans-serif;line-height:1.8em;div,h2,p,ul,limargin:0;padding:0;h1font-size:1em;font-weight:normal;h1 abackground:#047;padding:2px 3px;color:#fff;text-decoration:none;h1 a:hoverbackground:#a40000;color:#fff;text-decoration:underline;h3color:#888;font-weight:bold;font-size:1
3、em;margin:1em auto;position:relative;h5 abackground:#000;color:#fff;text-decoration:none;font-size:12px;font-weight:normal;letter-spacing:3px;position:absolute;right:7px;top:7px;padding:1px 12px;.boxwidth:700px;height:250px;/*demo css*/*SAMPLE-A*/#slideposition:relative;width:200px;height:250px;over
4、flow:hidden;border:1px solid #ccc;float:left;#slide imgwidth:200px;height:250px;#slide .icoposition:absolute;right:8px;bottom:6px;#slide .ico libackground:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid #cecece;font-family:Arial,Helvetica,sans-serif;text-align:
5、center;margin:2px;padding:1px;cursor:pointer;#slide .ico li.highbackground:#047;color:#fff;font-weight:bolder;/*SAMPLE-B*/#slide_bposition:relative;width:460px;height:250px;overflow:hidden;border:1px solid #ccc;float:right ;#slide_b imgwidth:500px;height:250px;#slide_b .ico_bposition:absolute;right:
6、8px;bottom:6px;#slide_b .ico_b libackground:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid #cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:pointer;#slide_b .ico_b li.high_bbackground:#a40000;color:#fff;font-weight
7、:bolder;/*SAMPLE-C*/#slide_cposition:relative;width:700px;height:250px;overflow:hidden;border:1px solid #ccc;margin-top:20px;#slide_c imgwidth:700px;height:250px;#slide_c .ico_cposition:absolute;right:8px;bottom:6px;#slide_c .ico_c libackground:#fff;float:left;display:block;width:15px;height:15px;li
8、ne-height:15px;border:1px solid #cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:pointer;#slide_c .ico_c li.highbackground:#000;color:#fff;font-weight:bolder;/开发版文件/压缩版文件/* 基于 jQuery 淡入淡出可自动切换的幻灯插件* jQuery Vesion:1.4.2* Plugin Page:http:/ Author Mr.Think
9、* Author blog http:/ Creation date: 2010.08.20*/调用插件并传入插件参数/此处传入的参数将覆盖 jquery.iFadeSlide.js 的参数,为空即使用插件文件中默认参数$(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););预览效果时左下角会提示错误，而且看不到效果，刷新一下 就可以看到效果了；当然，在实际使用中，不会出现这样的问题。与 之间
