淡入淡出自动切换的图片幻灯切换效果(html代码_css样式_javascript)可用于网页的图片滚动新闻.doc

淡入淡出自动切换的图片幻灯切换效果（html代码，css样式，javascript）可用于网页的图片滚动新闻1. 效果预览：2.代码部分：（将一下代码复制粘贴到记事本中，把后缀改成.html）三个jQuery版淡入淡出自动切换的图片幻灯切换效果_!-把下面代码加到与之间-/* 基于jQuery 1.4的渐入渐出切换幻灯插件* Plugin Page:/jq-plugin-ifadeslide/* Author Mr.Think* Author blog /* Creation date: 2010.08.20*/*reset css*/bodyfont-size:0.8em;letter-spacing:1px;font-family: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:1em;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;overflow: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: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: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: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;line-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:/jq-plugin-ifadeslide/* Author Mr.Think* Author blog /* 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).i