看了无数次就是不知道在CSS里面如何添加美化【】百变幻灯片，完全DIY（高级教程）

shunbig · 发表于 2010-12-20 19:30:20

官方在详细说下如何在CSS里面添加美化，出个在CSS添加美化样式给大家学习学习吗？

在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片

请跟随教程从头到尾仔细阅读，你将收获不小

第一步制作幻灯片：后台--》门户--》模块模板

点击添加按扭如下图所示

2010-9-25 10:48 上传
下载附件 (12.23 KB)

此处可以可以选择不同的模块分类如附件类、帖子类、文章类、图片类等等可以根据你的喜好选择不同的模块分类

下面我们以文章类为例来讲解，选择文章分类点提交如下图所示，为新建的模块起个名字如 “百变幻灯片”

把代码框里面的内容全部删除

2010-9-25 10:56 上传
下载附件 (27.19 KB)

接下来我们输入代码

首先在代码框里面输入

<div class="slidebox"></div>

复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例

此处的标签必须加一个class="slidebox"的属性如下面代码所示，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片，切记
如下图所示

2010-9-25 11:07 上传
下载附件 (13.58 KB)

接下来，我们增加幻灯代码下面代码用来实现图片（或内容）的显示作用属性必须为class="slideshow"的标签

<div class="slideshow"></div>

复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面上面已经讲过，完整代码如下

<div class="slidebox">
<div class="slideshow"></div>
</div>

复制代码

接下来我们来增加“滑动”、“点击”的代码

<div class="slidebar"></div>

复制代码

上面的代码必须放在 class="slidebox"的属性的标签里面上面已经讲过，完整代码如下

<div class="slidebox">
<div class="slideshow"> </div>
<div class="slidebar"> </div>
</div>

复制代码
以上代码已完成幻灯片的框架接下来我们为幻灯片添加数据代码

在<div class="slideshow"> </div> 代码中间插入图片显示代码

如下代码

<div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div>

复制代码
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量

接下来为图片增加循环代码如下代码

[loop]
<img src="{pic}" width="{picwidth}" height="{picheight}" />
[/loop]

复制代码
完整代码如下

<div class="slidebox">
<div class="slideshow">
[loop]
<img src="{pic}" width="{picwidth}" height="{picheight}" />
[/loop]
</div>
<div class="slidebar"> </div>
</div>

复制代码
接下来为滑动条增加数字

在<div class="slidebar"> </div>中增加娄字变量如下代码

<div class="slidebar">
[loop1]<span>{currentorder}</span>[/loop1]
</div>

复制代码
其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推来实现多处循环的目的

最后增加脚本代码如下以下代码放在模块代码的最后

<script type="text/javascript">
runslideshow();
</script>

复制代码

此时一个简单的幻灯片就完成了，幻灯片的完整代码如下

<div class="slidebox">
<div class="slideshow">
[loop]
<img src="{pic}" width="{picwidth}" height="{picheight}" />
[/loop]
</div>
<div class="slidebar">
[loop1]<span>{currentorder}</span>[/loop1]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

如下图所示

2010-9-25 12:01 上传
下载附件 (16.18 KB)

此时我们就可以通过前台DIY调用了

如下图所示调用

2010-9-25 13:46 上传
下载附件 (13.82 KB)

显示效果

2010-9-25 13:46 上传
下载附件 (38.19 KB)

至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下

下面讲解一些高级参数

1、滑动条如何控制让用户点击还是滑动
   在<div class="slidebar"> 中加入参数  （鼠标滑动）mevent="mouseover"  或（鼠标点击）mevent="click"
   完整代码如下  以下代码实现点击后变换

<div class="slidebar" mevent="click">
[loop1]<span>{currentorder}</span>[/loop1]
</div>

复制代码

2、如何实现上一个下一个的效果如下图样式

2010-9-25 12:18 上传
下载附件 (759 Bytes)

添加如下代码即可实现

<div class="slidebarup">
<span>up</span>
</div>
<div class="slidebardown">
<span>down</span>
</div>

复制代码
标签为 class="slidebarup" 的为上一个标签为 class="slidebardown" 的为下一个

3、当 slideshow的内容展示不全或不在一个区域时我们提供了更多内容的展示方法在需要展示的地方增加如下代码

<div class="slideother">
<span>可以是任何内容</span>
</div>

复制代码
同时支持多个slideother 如下代码

<div class="slideother">
<span>内容一</span>
</div>
<div class="slideother">
<span>内容二</span>
</div>

复制代码
4、如何控制幻灯片播放的速度
在<div class="slidebox" >增加参数如下代码其中 timestep="3000" 为毫秒

<div class="slidebox" timestep="3000">

复制代码

5、如何实现一次显示多个图片，每次切换多个如下图样式

2010-9-25 13:40 上传
下载附件 (13.52 KB)

在<div class="slidebox" >增加参数如下代码

<div class="slidebox" slidenum="3" slidestep="1">

复制代码
其中 slidenum="3" 表示显示数量， slidestep="1" 表示每点击一次左右按扭移动的次数

以上为幻灯片的所有功能

下面提供演示站点中门户及频道所用到的幻灯片代码（大家可以参照所提供的代码制作出炫丽的幻灯片）

以下所示效果都需要CSS配合

效果一

2010-9-25 13:52 上传
下载附件 (48.82 KB)

实现代码

<div class="slidebox">
<div class="slideshow">
[loop]
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
[/loop]
</div>
<div class="bignews_btns">
<div class="btns slidebar">
[loop1]
<em></em>
[/loop1]
</div>
<div class="desc slideother">
[loop2]
<a href="{url}"{target}>{title}</a>
[/loop2]
</div>
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果二

2010-9-25 13:55 上传
下载附件 (6.85 KB)

实现代码

<div class="slidebox" timestep="3000">
<div class="thumb on slideshow" >
[loop]
<span>
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
<p><a href="{url}"{target}>查看</a></p>
</span>
[/loop]
</div>
<div class="product_desc">
<div class="on slideother" >
[loop1]
<span>
<h2 class="title"><a href="{url}"{target}>{title}</a></h2>
<p>{summary}</p>
</span>
[/loop1]
</div>
<div class="product_price on slideother" >
[loop2]
<span>{dateline}</span>
[/loop2]
</div>
<div class="btns slidebar">
[loop3]<em>{currentorder}</em>[/loop3]
</div>
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果三

2010-9-25 13:58 上传
下载附件 (13.61 KB)

实现代码

<div class="slidebox" slidenum="3" slidestep="1" >
<div class="leftbtn slidebarup"><a href="javascript:void(0);" mevent="click" ><img src="template/default/portal/index/images/commend_bg_2_leftbtn.gif" /></a></div>
<div class="middle cl" >
<ul class="slideshow">
[loop]<li><a href="{url}"{target}><img src="{avatar_big}" width="{picwidth}" height="{picheight}" /></a><p><a href="{url}"{target}>{title}</a></p></li>[/loop]
</ul>
</div>
<div class="rightbtn slidebardown "><a href="javascript:void(0);" mevent="click"><img src="template/default/portal/index/images/commend_bg_2_rightbtn.gif" /></a></div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果四

2010-9-25 14:02 上传
下载附件 (30.53 KB)

实现代码

<div class="photobox cl slidebox" timestep="3000">
<div class="z leftbtn">
<span>美食大赏</span>
<div class="slidebar">
[loop]
<em></em>
[/loop]
</div>
</div>
<div class="y rightpic">
<div class="slideshow">
[loop1]
<div>
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
<p><a href="{url}"{target}>{title}</a></p>
</div>
[/loop1]
</div>
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果五

2010-9-25 14:05 上传
下载附件 (100.65 KB)

实现代码

<div class="z slidebox">
<div class="box slideshow">
[loop]
<div>
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
</div>
[/loop]
</div>
<div class="box_btn cl slidebar">
[loop1]
<div>
<span>{title}</span>
</div>
[/loop1]
</div>
<div class="box_desc slideother">
[loop2]
<p>
<a href="{url}"{target}>{summary}</a></p>
[/loop2]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果六

2010-9-25 14:09 上传
下载附件 (45.85 KB)

实现代码

<div class="bignews slidebox " >
<div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
<div class="btns slidebar">
[loop1]
<em>{currentorder}</em>
[/loop1]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果七

2010-9-25 14:12 上传
下载附件 (14.85 KB)

实现代码

<div class="slidebox ">
<div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
<dd class="slidebar">
[loop1]
<em><a href="#"><img src="template/default/portal/food/images/num/0{currentorder}.gif" /></a></em>
[/loop1]
</dd>
<div class="slideother">
[loop2]
<div><div class="title">
<a href="{url}"{target}>{title}</a>
</div>
<p>
{summary}
</p></div>
[/loop2]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果八

2010-9-25 14:15 上传
下载附件 (68.99 KB)

实现代码

<div class="bignews slidebox">
<div class="picbox slideshow">
[loop]<div><img src="{pic}" width="{picwidth}" height="{picheight}" /></div>[/loop]
</div>
<div class="bignews_btn slidebar" mevent="mouseover" >
[loop1]
<div >
<p>
<strong><a href="{url}"{target}>{title}</a></strong>
<em>{summary}</em>
</p>
<img src="{pic}" width="60" height="66" />
</div>
[/loop1]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果九

2010-9-25 14:17 上传
下载附件 (42.58 KB)

实现代码

<div class="slidebox">
<div class="slideshow">
[loop]
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
[/loop]
</div>
<div class="btn">
<em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em>
<em class="slidebar">[loop1]<span><img src="template/default/portal/car/images/empty_img.gif" width="8" height="8"/></span>[/loop1]</em>
<em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em>
</div>
<div class="bignews_title slideother">
[loop2]
<em><a href="{url}"{target}>{title}</a></em>
[/loop2]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

效果十

2010-9-25 14:21 上传
下载附件 (65.43 KB)

实现代码

<div class="slidebox">
<div class="bignews">
<div class="slideshow">
[loop]
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
[/loop]
</div>
</div>
<div class="bignewsdesc">
<div class="bignewsbtn">
<em class="slidebarup"><img src="template/default/portal/home/images/bignews_left.gif" /></em>
<span class="slidebar">
[loop1]
<em>{currentorder}</em>
[/loop1]
</span>
<em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em>
</div>
<div class="slideother">
[loop2]
<dd >
<h2><a href="{url}"{target}>{title}</a></h2>
<p><a href="{url}"{target}>{summary}</a></p>
</dd>
[/loop2]
</div>
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

复制代码

滚骨碌 · 发表于 2010-12-20 19:43:22

好长，支持

zkw0 · 发表于 2010-12-20 20:01:16

pcyi · 发表于 2010-12-20 20:33:06

也说两句 · 发表于 2010-12-20 20:52:45

顶,

job888 · 发表于 2010-12-20 20:57:16

job888 · 发表于 2010-12-20 20:57:38

确实用得着~~

foolart · 发表于 2010-12-20 21:33:38

的确不错楼主辛苦了谢谢

Andxy · 发表于 2010-12-20 21:47:09

搞啥东东，这不是官方原来发的教程吗？

sym1005 · 发表于 2010-12-20 22:04:09

Andxy 发表于 2010-12-20 21:47
搞啥东东，这不是官方原来发的教程吗？

官方发的教程在哪里？

		自动登录	找回密码
密码			立即注册

看了无数次就是不知道在CSS里面如何添加美化【】百变幻灯片，完全DIY（高级教程）

评分