利用SQL标签制作幻灯特效(2008-12-19科汛论坛首发)-领先建站CMS提供服务商我们专注于CMS建站产品的研发

44255 查看	66 回复

主题：[经典教程]利用SQL标签制作幻灯特效(2008-12-19科汛论坛首发) [收藏主题]

转到：

otbbs 当前离线

1605 主题	12 广播	2 粉丝

级别:高一年

用户积分:8980 分
登录次数:1225 次
注册时间:2006/8/7
最后登录:2023/11/29

otbbs 发表于：2008/12/19 20:40:00 | 只看该作者查看该作者主题 51楼

有生源找课程就上科汛课堂街!

显示不出来？怎么回事，已按你说明的注明了幻灯属性了~~

做官网就用科汛智能建站系统!

支持(0) |

反对(0)

顶端

底部

好好当前离线

300 主题	0 广播	0 粉丝

级别:三年级

用户积分:1340 分
登录次数:50 次
注册时间:2007/1/8
最后登录:2008/12/29

好好发表于：2008/12/19 20:26:00 | 只看该作者查看该作者主题 52楼

做考试题库就用#科汛在线考试系统!

以下是引用otbbs在2008-12-19 19:47:00的发言：
这么好的帖还没人发现~~~强烈支持你~~小林~

做考试题库就用#科汛在线考试系统!

支持(0) |

反对(0)

顶端

底部

otbbs 当前离线

1605 主题	12 广播	2 粉丝

级别:高一年

用户积分:8980 分
登录次数:1225 次
注册时间:2006/8/7
最后登录:2023/11/29

otbbs 发表于：2008/12/19 19:47:00 | 只看该作者查看该作者主题 53楼

有生源找课程就上科汛课堂街!

这么好的帖还没人发现~~~强烈支持你~~小林~

做考试题库就用#科汛在线考试系统!

支持(0) |

反对(0)

顶端

底部

j500 当前离线

190 主题	0 广播	0 粉丝

级别:一年级

用户积分:1429 分
登录次数:30 次
注册时间:2008/5/22
最后登录:2008/12/30

j500 发表于：2008/12/19 19:48:00 | 只看该作者查看该作者主题 54楼

做考试题库就用#科汛在线考试系统!

很好，很强大。希望不定时提供类似教程

做新职业技能培训平台就选#科汛网校

支持(0) |

反对(0)

顶端

底部

otbbs 当前离线

1605 主题	12 广播	2 粉丝

级别:高一年

用户积分:8980 分
登录次数:1225 次
注册时间:2006/8/7
最后登录:2023/11/29

otbbs 发表于：2008/12/19 19:17:00 | 只看该作者查看该作者主题 55楼

做考试题库就用#科汛在线考试系统!

好帖~~支持

科汛商学院助您快速入门

支持(0) |

反对(0)

顶端

底部

小林当前离线

233 主题	0 广播	2 粉丝

级别:二年级

用户积分:2186 分
登录次数:88 次
注册时间:2008/7/19
最后登录:2014/1/11

小林发表于：2008/12/19 19:10:00 | 只看该作者查看该作者主题 56楼

做线上考试培训就选#科汛网校

到了这一步,也是关键的一步,就是制作标签的循环体了.

我们可以将以上代码直接放在sql标签的循环体里.也可以将样式css和及脚本js直接放在模板里分别调用.

.flashNews { position:relative;width:370px;height:225px;margin-bottom:12px;overflow:hidden;}
.flashNews img { display:block;width:370px;height:225px;overflow:hidden;}
.flashNews .bg { position:absolute;left:0;bottom:0;_bottom:-1px;width:370px;height:73px;background:#000000;filter:alpha(opacity=39);-moz-opacity:0.39;opacity:0.39;}
.flashNews h3 { position:absolute;left:10px;top:155px;width:354px;height:35px;line-height:35px;z-index:2;}
.flashNews h3 a { font-size:20px;font-family:"黑体";font-weight:normal;color:#FFFFFF;}
.flashNews h3 a:hover { color:#F20000;}
.flashNews p { position:absolute;left:10px;top:185px;width:354px;height:20px;line-height:20px;;z-index:2;}
.flashNews p a { color:#FFFFFF;}
.flashNews p a:hover { color:#F20000;}
.flashNews .pager { position:absolute;right:0;bottom:0;_bottom:-1px;padding-left:47px;_padding-left:46px;background:url(img/flashPage_bg.png) 0 0 no-repeat;z-index:2;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/flashPage_bg.png',sizingMethod='crop')}
.flashNews .pager a { float:left;width:15px;height:18px;font-size:10px;font-family:Tahoma;font-weight:bold;color:#FFFFFF;text-align:center;margin-left:1px;background:#000000;}
.flashNews .pager a:hover, .flashNews .pager a.currA { color:#F20000;}
</style>
<script type="text/javascript" src="http://images.movie.xunlei.com/jsframe/prototype.js"></script>
<script type="text/javascript" src="http://images.movie.xunlei.com/jsframe/effect_switcher_1104.js"></script>
<title>资讯推荐</title>
<base target="_blank">
</head>

<body>
<div class="flashNews">
<div id="SwitchPicContainer"></div>
<h3 id="SwitchTitle_title"></h3>
<p id="SwitchTitle_stitle"></p>
<div id="FlashSwitchPageNav" class="pager"></div>
<div class="bg"></div>
</div>
<script>
var PicData = new Array() ;
var i = 0 ;
[loop=5]
PicData[i] = new Array() ;
PicData[i]['img'] = '{$Field(picurl,Text,0,...,0,/images/nopic.gif)}' ;
PicData[i]['title'] = '{$Field(title,Text,0,...,0,)}' ;
PicData[i]['stitle'] = '{$Field(intro,Text,50,...,2,)}' ;
PicData[i]['link'] = '{$Field(id,GetInfoUrl,1,1)}' ;
PicData[i]['blockid'] = '{$Field(id,GetInfoUrl,1,2)}' ;
i++
[/loop]

FlashSwitch.init({
        Container:"SwitchPicContainer" ,
        Data:PicData,
        PageNav:"FlashSwitchPageNav",
        Titles:['title','stitle'],
        TimeIntval:3000
       }) ;
</script>

您只需要简单的将上面部分代码放到循环里,最后保存即可.

请注意上面红色粗体字的构造.这里放了

[loop=5]

...

[/loop]

即表示将红色那部分代码循环5次输出,最终得到如一楼所讲的完整代码。

最后一步就是在你的模板里调用这个标签了,调用方式为:{SQL_标签名称()},如果你看不到效果,可能是由于你没有添加具体幻灯属性并且包含图片的文章,请先添加再测试。

为避免迅雷网站将以下两个JS文件删除,我已将它下载下来,您只需把它放在ks_inc目录下,并将以下代码

更改为

下载信息 [文件大小：1.63 KB 下载次数：次]