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

《淡入淡出自动切换的图片幻灯切换效果(html代码_css样式_javascript)可用于网页的图片滚动新闻》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、淡入淡出自动切换的图片幻灯切换效果（html代码，css样式，javascript）可用于网页的图片滚动新闻1.效果预览：2.代码部分：（将一下代码复制粘贴到记事本中，把后缀改成.html）/********************************@基于jQuery1.4的渐入渐出切换幻灯插件*@PluginPage:http://mrthink.net/jq-plugin-ifadeslide/*@AuthorMr.Think*@Authorbloght

3、tp://mrthink.net/*@Creationdate:2010.08.20*******************************//*resetcss*/body{font-size:0.8em;letter-spacing:1px;font-family:"MSSansSerif",Geneva,sans-serif;line-height:1.8em;}div,h2,p,ul,li{margin:0;padding:0;}h1{font-size:1em;font-weight:normal;}h1a{background:#047;padd

4、ing:2px3px;color:#fff;text-decoration:none;}h1a:hover{background:#a40000;color:#fff;text-decoration:underline;}h3{color:#888;font-weight:bold;font-size:1em;margin:1emauto;position:relative;}h5a{background:#000;color:#fff;text-decoration:none;font-size:12px;font-weight:normal;letter-sp

5、acing:3px;position:absolute;right:7px;top:7px;padding:1px12px;}.box{width:700px;height:250px;}/*democss*//*SAMPLE-A*/#slide{position:relative;width:200px;height:250px;overflow:hidden;border:1pxsolid#ccc;float:left;}#slideimg{width:200px;height:250px;}#slide.ico{position:absolute;right

6、:8px;bottom:6px;}#slide.icoli{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1pxsolid#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:pointer;}#slide.icoli.high{background:#047;color:#fff;font-weigh

7、t:bolder;}/*SAMPLE-B*/#slide_b{position:relative;width:460px;height:250px;overflow:hidden;border:1pxsolid#ccc;float:right;}#slide_bimg{width:500px;height:250px;}#slide_b.ico_b{position:absolute;right:8px;bottom:6px;}#slide_b.ico_bli{background:#fff;float:left;display:block;width:15px;

8、heigh