在DEDECMS 3.1lit里实现幻灯片效果(区别于官方,增添了选择按钮)_DedeCms教程
教程Tag:暂无Tag,欢迎添加,赚取U币!
<style type="text/css">
<!--
/********焦点图*********/
/*图片层*/
#pic_layer{ position:absolute; z-index:1; width:325px; height:225px; overflow:hidden;}
/*焦点文字*/
#f_text{width:250px; height:23px;line-height:23px; font-weight:bold; overflow:hidden;
float:left;filter:dropshadow(color=#EEEEEC,offx=1,offy=1);}
/*按钮*/
#f_button_num{ width:72px;height:23px; padding-top:2px; overflow:hidden; float:right;}
.f_button_on{width:17px; height:17px; margin-left:1px; float:right; background:url
([img]http://www.pclady.com.cn/images/06/06index2_button.gif[/img]); overflow:hidden; text-
align:center; color:#fff; font-weight:bold; line-height:17px; cursor:pointer !important;
cursor:hand;}
.f_button_off{width:17px;height:17px; margin-left:1px;float:right;overflow:hidden;text-
align:center;color:#000;font-weight:bold;line-height:17px;cursor:pointer !important;
cursor:hand;}
/*字size*/
.f12b{font-size:12px;font-weight:bolder;}
.f16b{font-size:16px;font-weight:bolder;}
/*颜色*/
.c1{color:#565656;}
.c2{color:#9D499A;}
.c3{color:#fff;}
.c4{color:#4E3C29;}
.c5{color:#FF7E00;}
.c6{color:#6B6866;}
.c7{color:#AE8300;}
.c8{color:#DE108C;}
.c9{color:#BD2A63;}
.c10{color:#464646;}
/**** 图片外诓 ****/ .sp_pic img{border:#FFF 4px solid;}
/*切换2*/
#line_lay{width:559px; height:190px;overflow:hidden; float:right;}
#line_lay .title{width:24px;height:190px; float:left;margin-left:1px;cursor:hand; font-
weight:bold; text-align:center; padding-top:25px;line-height:16px;}
#line_lay .line_content{ width:360px; height:190px; margin-
left:1px;display:none;float:left; background:#D3D3D3;}
#line_lay #line1{width:68px;height:190px;cursor:hand;background: url
([img]http://www.pclady.com.cn/images/06/06index2__36.jpg[/img]);}
#line2{background: #E0CEE2 url([img]http://www.pclady.com.cn/images/06/06index2__38.gif[/img]) no-
repeat top; color:#9E01B1;}
#line3{background: #ECE0C1 url([img]http://www.pclady.com.cn/images/06/06index2__47.gif[/img]) no-
repeat top; color:#B88A16;}
#line4{background: #EAC6D4 url([img]http://www.pclady.com.cn/images/06/06index2__43.gif[/img]) no-
repeat top; color:#C3356D;}
#line5{background: #C5DBE6 url([img]http://www.pclady.com.cn/images/06/06index2__45.gif[/img]) no-
repeat top; color:#006BBE;}
#line6{background: #F2E2C7 url([img]http://www.pclady.com.cn/images/06/06index2__47.gif[/img]) no-
repeat top; color:#FF9600;}
/*line_point*/
.lp{ width:98%; height:1px; overflow:hidden;border-bottom:1px #7F7F7F dashed; }
-->
</style>
<table height="240" border="0" cellpadding="0" cellspacing="0" style="margin-top:1px;">
<tr>
<td width="5" bgcolor="#A1A1A1"></td>
<!--
/********焦点图*********/
/*图片层*/
#pic_layer{ position:absolute; z-index:1; width:325px; height:225px; overflow:hidden;}
/*焦点文字*/
#f_text{width:250px; height:23px;line-height:23px; font-weight:bold; overflow:hidden;
float:left;filter:dropshadow(color=#EEEEEC,offx=1,offy=1);}
/*按钮*/
#f_button_num{ width:72px;height:23px; padding-top:2px; overflow:hidden; float:right;}
.f_button_on{width:17px; height:17px; margin-left:1px; float:right; background:url
([img]http://www.pclady.com.cn/images/06/06index2_button.gif[/img]); overflow:hidden; text-
align:center; color:#fff; font-weight:bold; line-height:17px; cursor:pointer !important;
cursor:hand;}
.f_button_off{width:17px;height:17px; margin-left:1px;float:right;overflow:hidden;text-
align:center;color:#000;font-weight:bold;line-height:17px;cursor:pointer !important;
cursor:hand;}
/*字size*/
.f12b{font-size:12px;font-weight:bolder;}
.f16b{font-size:16px;font-weight:bolder;}
/*颜色*/
.c1{color:#565656;}
.c2{color:#9D499A;}
.c3{color:#fff;}
.c4{color:#4E3C29;}
.c5{color:#FF7E00;}
.c6{color:#6B6866;}
.c7{color:#AE8300;}
.c8{color:#DE108C;}
.c9{color:#BD2A63;}
.c10{color:#464646;}
/**** 图片外诓 ****/ .sp_pic img{border:#FFF 4px solid;}
/*切换2*/
#line_lay{width:559px; height:190px;overflow:hidden; float:right;}
#line_lay .title{width:24px;height:190px; float:left;margin-left:1px;cursor:hand; font-
weight:bold; text-align:center; padding-top:25px;line-height:16px;}
#line_lay .line_content{ width:360px; height:190px; margin-
left:1px;display:none;float:left; background:#D3D3D3;}
#line_lay #line1{width:68px;height:190px;cursor:hand;background: url
([img]http://www.pclady.com.cn/images/06/06index2__36.jpg[/img]);}
#line2{background: #E0CEE2 url([img]http://www.pclady.com.cn/images/06/06index2__38.gif[/img]) no-
repeat top; color:#9E01B1;}
#line3{background: #ECE0C1 url([img]http://www.pclady.com.cn/images/06/06index2__47.gif[/img]) no-
repeat top; color:#B88A16;}
#line4{background: #EAC6D4 url([img]http://www.pclady.com.cn/images/06/06index2__43.gif[/img]) no-
repeat top; color:#C3356D;}
#line5{background: #C5DBE6 url([img]http://www.pclady.com.cn/images/06/06index2__45.gif[/img]) no-
repeat top; color:#006BBE;}
#line6{background: #F2E2C7 url([img]http://www.pclady.com.cn/images/06/06index2__47.gif[/img]) no-
repeat top; color:#FF9600;}
/*line_point*/
.lp{ width:98%; height:1px; overflow:hidden;border-bottom:1px #7F7F7F dashed; }
-->
</style>
<table height="240" border="0" cellpadding="0" cellspacing="0" style="margin-top:1px;">
<tr>
<td width="5" bgcolor="#A1A1A1"></td>
相关DedeCms教程:
- Dedecms生成百度地图图文教程
- 织梦dedecms生成下拉式友情链接列表
- DEDECMS使用拼音首字母做栏目名称
- 织梦DEDECMS站群增强版 DedeCMS搭建站群首选
- DedeCMS Error:Tag disabled:php错误的完整处理方法
- dedecms编码转换方法 gbk转UTF-8,UTF-8转GBK
- 防XSS,sql注射,代码执行,文件包含的通用代码
- DedeCms教程:优化DedeCMS搜索结果
- DedeCms教程:Linux+Apache+PHP+MySQL服务器环境(CentOS篇)
- DedeCms教程:LuManager服务器管理软件安装DEDECMS软件
- DedeCms教程:Ubuntu/Debian上安装 PHP 5.3, Nginx 和 PHP-fpm
- DedeCms教程:windows server 2003 php 环境搭建