| 网站首页 | 动易教程 | 动易下载 | 意见反馈 | 动易论坛 | 动易商城 | 服务项目 | 个人主页 | 书画互动首页 | 

您现在的位置: 书画互动动易专区 >> 动易教程 >> 动易2006 >> 文章正文

  没有公告

  [组图]很酷的js幻灯片(2006-4-04)更新        【字体:  
很酷的js幻灯片(2006-4-04)更新
作者:佚名    文章来源:不详    点击数:    更新时间:2006-11-5    

【很酷的js幻灯片】更新For IE and FF

效果如下:

为了简洁把图片更新时间去掉了,想改的自己到标签里面改吧!

使用方法:不说了,只要别把参数空者就可以了!(真的不小心空了把w3wp.exe进程强行结束就可以恢复正常了)

这个是网易教育频道的 我弄出来给喜欢的朋友!

需要在CSS里面加入定义,适合有一点CSS基础的人用。可根据情况自己修改。
由于CSS有继承的特性,就是说如果你网页定义了全局的属性,而这里没有定义到,则属性会继承下来.所以你需要有点CSS基础,根据自己情况稍微改即可.
(不要再问为啥我的文字没对齐,图片位置不对什么的了,因为不是标签问题,自己改CSS吧)

红色部分为4个必须的图片存放位置
可以改绿色部分限制图片大小,当然其他部分也要根据自己情况修改一下
蓝色的是外框自然要比红色的大一些哦
其它文字颜色什么的自己根据需要改吧

CSS简化了一下
#focusPic { width:250px;font-size:12px;word-break:break-all;overflow: hidden;}
#focusPic img ,#focusPic div ,#focusPic ul ,#focusPic li ,#focusPic p {padding: 0px;margin: 0px;border-width:0px}
#focusPic ul {padding: 0px;margin: 0px;border-width:0px}
#focusPic ol {border-width: 0px; padding: 0px;margin: 0px}
#focusPic li {border-width: 0px; padding: 0px;margin: 0px}
#focusPic .clear {clear: both; font-size: 1px; visibility: hidden; width: 1px}
#focusPic h2 { font-size:15px; text-align: center; padding:0px; margin:0px;}
#focusPic h2 a{color:#000000}
#focusPic h2 a:hover{color:#c00;text-decoration: underline}
#focusPic a {text-decoration: none}
.focusPic { background: #fff; margin: 0px auto; width: 250px}
.focusPic .pic {padding: 0 4px!important;margin: 0px auto; overflow: hidden; width: 250px;height: 190px}
.focusPic H2 {padding-right: 0px; padding-left: 8px; font-size: 14px; padding-bottom: 3px; padding-top: 2px; text-align: left}
.focusPic P {padding-right: 0px; padding-left: 8px; padding-bottom: 10px; margin: 0px; line-height: 160%; padding-top: 0px; text-align: left}
.focusPic .textNum {padding-right: 8px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px}
.focusPic .textNum .text {float: right; padding:5px 8px 0 0!important}
.focusPic .textNum .num {float: right; overflow: hidden; width: 112px; height: 18px}
.focusPic .textNum .bg1 {background: url(/Images/num1.gif)}
.focusPic .textNum .bg2 {background: url(/Images/num2.gif)}
.focusPic .textNum .bg3 {background: url(/Images/num3.gif)}
.focusPic .textNum .bg4 {background: url(/Images/num4.gif)}
.focusPic .textNum .num ul {float: left; width: 112px;margin-top:5px!important}
.focusPic .textNum .num li {padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; float: left; padding-bottom: 0px; width: 28px; color: #fff; padding-top: 5px; list-style-type: none; text-align:center}
.focusPic .textNum .num li a {padding-right: 5px; padding-left: 5px; padding-bottom: 0px; color: #fff; padding-top: 0px}
.focusPic .textNum .num li a:visited {color: #fff}
.focusPic .textNum .num li a:hover {color: #ff0}
#focusPic .cDRed{ color:#C00}
#focusPic .cDRed a:hover{text-decoration: underline}
#focusPic1{display: block}
#focusPic2 ,#focusPic3 ,#focusPic4 {display: none}
#focusPic .pic img { width:240px; height:180px}
[此贴子已经被作者于2006-4-4 15:25:56编辑过]

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    很酷的js幻灯片
    关于2006模版中使用的JS文件
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    236147427 QQ群(书画艺术):9872875 QQ群(网站设计):11616321 bszzg@163.com
    书画互动版权所有 吉ICP备05008388号
    Copyright 2005 www.bs2005.com All Rights Reserved