网页图片滚动新闻代码
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
自动切换的图片幻灯切换效果(图片滚动新闻)
可自己修改滚动图片和增加滚动图片数量,以及修改滚动图片大小等!
1.效果预览:
2.代码部分:(将一下代码复制粘贴到记事本中,把后缀改成.html)
/*******************************
* @基于jQuery 1.4的渐入渐出切换幻灯插件
* @Plugin Page:/jq-plugin-ifadeslide/
* @Author Mr.Think
* @Author blog /
* @Creation date: 2010.08.20
*******************************/
/*reset css*/
body{font-size:0.8em;letter-spacing:1px;font-family:"MS Sans
Serif",Geneva,sans-serif;line-height:1.8em;}
div,h2,p,ul,li{margin:0;padding:0;}
h1{font-size:1em;font-weight:normal;}
h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none;}
h1 a:hover{background:#a40000;color:#fff;text-decoration:underline;}
h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative;}
h5
a{background:#000;color:#fff;text-decoration:none;font-size:12px;font-weight:normal;letter-spaci ng:3px;position:absolute;right:7px;top:7px;padding:1px 12px;}
.box{width:700px;height:250px;}
/*demo css*/
/*SAMPLE-A*/
#slide{position:relative;width:200px;height:250px;overflow:hidden;border:1px solid #ccc;float:left;}
#slide img{width:200px;height:250px;}
#slide .ico{position:absolute;right:8px;bottom:6px;}
#slide .ico li{background:#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:po inter;}
#slide .ico li.high{background:#047;color:#fff;font-weight:bolder;}
/*SAMPLE-B*/
#slide_b{position:relative;width:460px;height:250px;overflow:hidden;border:1px solid #ccc;float:right ;}
#slide_b img{width:500px;height:250px;}
#slide_b .ico_b{position:absolute;right:8px;bottom:6px;}
#slide_b .ico_b li{background:#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:po inter;}
#slide_b .ico_b li.high_b{background:#a40000;color:#fff;font-weight:bolder;}
/*SAMPLE-C*/
#slide_c{position:relative;width:700px;height:250px;overflow:hidden;border:1px solid #ccc;margin-top:20px;}
#slide_c img{width:700px;height:250px;}
#slide_c .ico_c{position:absolute;right:8px;bottom:6px;}
#slide_c .ico_c li{background:#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:po inter;}
#slide_c .ico_c li.high{background:#000;color:#fff;font-weight:bolder;}