一款基于js的幻灯图片代码

一款基于js的幻灯图片代码for3.1正式版[已经编辑完整，可使用]

请注意，第一帖是代码部分，第二帖是css样式部分。

布局构成是div+css控制样式，所以一定不要忘了把css部分也复制到你的css文件里。

新接触dedecms，对标签不太熟悉，不知道我使用att=3这样对不对，反正我在本地测试时，显示的是正确的，只是有个问题，就是dede所生成的缩略图，并没有按照标签上规定的大小生成，不知道是我的系统环境不对，还是怎么。


使用js的幻灯效果，好处在于被抓页面缩略图时，flash会显示成空白，而这个效果会正常显示图片，还有在多浏览器下兼容性也好，falsh虽然漂亮，却只能在IE下使用了，其他浏览器因为对播放器版本支持不同，会有不显示而导致页面布局变形的问题。


我本人并没有使用dedecms建站，所以目前想看演示，可以看我现在的站http://www.25525.com

幻灯效果是一样的，系统不是dedecms，我学习dedecms只是想研究一下，将来做其他站时想用它，现在看对标签的拆解支持还是很好的，只是官方都不使用div+css布局，让我有点迷惑，理论上标签如果可以拆解开来，应该能使用标准布局的，使用表格布局让我有点不敢恭维。

想修改样式，要修改css部分，已经是标准布局了，建议使用的朋友不要再改为table布局

CODE:

       

 

 

 

#f_menu{width:410px;height:20px; margin:0 auto; overflow:hidden;}
#f_menu a{height:20px; line-height:20px; float:left; margin-right:1px; border-bottom:1px #fff solid; background:#393939; display:block; text-align:center; color:#fff; overflow:hidden;}
#f_menu a:hover{background:#FF8500;}
#f_menu a.on{background:#FF8500;}

#f_div{width:410px; height:200px; margin:0 auto; overflow:hidden;}
#f_adDiv{width:100%; height:25px; overflow:hidden;}
#f_imgDiv{width:100%; height:200px; overflow:hidden;}
#f_img{filter:progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); border:0;}
#f_infoDiv{width:100%;top:-14px !important;top:-14px; position:relative;}
#f_buttonDiv{width:100%; margin-right:1px; height:14px; overflow:hidden; text-align:left;}
#f_line{margin-left:280px; width:130px;height:1px;background:#fff; overflow:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100)}
#f_buttonDiv div{width:1px;height:14px; background:#fff; float:right;}
#f_buttonDiv .bg{width:14px; height:14px; background:#fff; float:right; filter:Alpha(Opacity=40);}
#f_buttonDiv a{width:14px;height:14px !important;height:14px;float:right; color:#fff;padding-top:2px !important; padding-top:0;font-family:Arial, Helvetica, sans-serif;font-size:10px;text-align:center;display:block;overflow:hidden;text-decoration:none;position:absolute;}
#f_buttonDiv a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{color:#000;}
#f_buttonDiv a:hover{background:#FF840C;color:#fff;}
#f_buttonDiv a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{background:#FF840C;color:#fff;}
#f_buttonDiv a.on:hover{background:#FF6600;}
#f_text{
  height:26px;
  line-height:26px;
  overflow:hidden;
  text-align:center;
  font-weight: bold;
}
#f_text a:link,#f_text a:visited,#f_text a:active{color:#000;text-decoration: none;}
#f_text a:hover{color:#FF6600;text-decoration: none;}

 

http://bbs.dedecms.com/read.php?tid=10021&keyword=%BB%C3%B5%C6