dz首页调用幻灯片.doc

在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片
& V# U5 O* c( W: }# \' ~; v: S
请跟随教程从头到尾仔细阅读，你将收获不小

第一步制作幻灯片：后台--》门户--》模块模板8 [2 q" ]4 n7 S6 [! L ?) a m
/ ` }- y3 S) V; b- S$ ]( j( W
点击 添加按扭 如下图所示; @; a: W8 U/ Q% j) u" G% D
" O1 `% N! i) P2 H( ^7 W0 t

2010-9-25 10:48 上传) w, I Q, E: w" z3 l0 o3 M
下载附件 (12.23 KB)

: _7 n. D! ^2 z' @; `" q% \

; D5 c! q) f* x* D5 b$ f
9 Q/ T! O" q3 H! \- W
此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类
- u8 S& c; i/ Q' c, w' F
下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片” ) G& w; Z% S$ ?" r

把代码框里面的内容全部删除 0 [' A w- \ t+ a9 M7 G( `- g4 [
T3 H$ A6 g9 ~( Z5 j6 Z

2010-9-25 10:56 上传
下载附件 (27.19 KB)
! A- w5 K' M1 N) z! ?

7 V+ A' P6 ]6 B! ]' E: n+ L1 s

. z1 c6 t* z, t5 v0 n
接下来 我们输入代码 # d" Y6 M. r0 K
; g2 ]7 O2 v4 p6 i( ^' @1 I7 F
首先在代码框里面输入
· <div class="slidebox"></div>" v/ i! q2 n- w- _
& s. o* F/ l. k+ |% w
复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例

此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记( C& ?+ _8 f( R7 t
如下图所示$ t8 F* u2 Q3 p( i
. ]2 ~; z5 S4 ^0 f9 n

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

: E- z6 i+ o- M7 B- Q
. K' u0 [' {2 c6 t
& h5 P3 q8 F/ Z7 U+ x
接下来，我们增加幻灯代码 下面代码用来实现图片（或内容）的显示作用 属性必须为class="slideshow"的标签

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

复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下0 f* M/ e" K( x: d0 f7 a
0 y, f# X( x$ c* m
· <div class="slidebox">
· <div class="slideshow"></div>
· </div>
) Z" m& B8 f1 |6 i( H9 {
复制代码+ T) }/ D& y' K* n4 l# \

接下来我们来增加“滑动”、“点击”的代码
. P; f( k& D: P& y) p1 x
· <div class="slidebar"></div>% ?+ z) w% m. a$ r

复制代码/ C3 Z, b) u& J0 P
! ~# @% f9 J$ G! Z1 Y
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下

· <div class="slidebox"><!--幻灯片开始-->
· <div class="slideshow"> </div><!--图片展示-->
· <div class="slidebar"> </div><!--幻灯片控制展示-->
· </div><!--幻灯片结束-->
; }+ V1 J* [1 T
复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码 7 O9 O( [% o9 i, }. A# a$ Q8 J

在<div class="slideshow"> </div> 代码中间插入图片显示代码
0 K5 ^ q2 J: K& A. Y9 {
如下代码 3 b+ Q6 G8 X& F$ S0 r
· <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--图片展示-->* }) J5 R' L e# q% \2 h2 J! A( `
5 ~% C+ E4 B' U. v$ {% u
复制代码0 \2 B0 T" q* n& \
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量
( d3 ?8 c3 g$ t: G! y" v
接下来为图片增加循环代码 如下代码$ W) z" _3 q* K1 M1 b
2 }- H% Z' |/ N8 Q5 k% }
· [loop]
· <img src="{pic}" width="{picwidth}" height="{picheight}" />
· [/loop]

复制代码( y& o+ q& ~! B4 S% k) b, F8 F
完整代码如下

· <div class="slidebox"><!--幻灯片开始-->
· <div class="slideshow">
· [loop]
· <img src="{pic}" width="{picwidth}" height="{picheight}" />
· [/loop]
· </div>
· <!--图片展示-->
· <div class="slidebar"> </div><!--幻灯片控制展示-->
· </div><!--幻灯片结束--># t7 c8 [9 A# W$ s. f5 g t
* ?' w u2 I' q% x# L0 D5 M, z
复制代码$ \6 J) [0 E$ f, o
接下来 为滑动条增加数字 ( [0 L' l. P$ w. ?

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

· <div class="slidebar">
· [loop1]<span>{currentorder}</span>[/loop1]
· </div>3 w0 B! ?' z' M
" p1 S- X, L9 g% O( T8 |
复制代码" E+ y- c e$ ?9 M: S
其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的

最后增加脚本代码 如下 以下代码放在模块代码的最后% z, u7 y( P, G9 Q
$ b4 P% K8 t9 d( U8 [
· <script type="text/javascript">
· runslideshow();
· </script>

复制代码- u: ]9 w P/ o1 a5 b9 |# h, n0 \
9 O5 W9 {- i; u4 D8 ]+ u
此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下5 J- k9 n G7 w& f% y* d

· <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>

复制代码
( \+ g) Q: a: \9 ^$ E
如下图所示 L( x, A1 }3 \6 Y. V5 w4 e

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

% I# O( {5 E2 j. A

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

如下图所示 调用! c4 r0 P: ?# E& i
; @$ M$ F: R1 ]0 P

2010-9-25 13:46 上传$ Y% V; d$ G6 P' D( s1 C
下载附件 (13.82 KB) 6 y6 ^3 Y2 ~" |& K# ^+ f( q
; K: i) O8 Q) `8 H# t
7 F/ d* p5 _. A4 X

. w' @0 |" b, \, H* `, \$ ~5 C
( ~' V3 n7 }. D9 w3 L8 @0 \' c

显示效果( x5 X% M2 W/ [. }/ r" u
! _- I/ m" Y( I! u

2010-9-25 13:46 上传5 N2 m6 S5 E4 T( h; [$ e6 R
下载附件 (38.19 KB) / m+ q: `) R# w/ \/ t6 I
2 I0 \' m3 u7 L

5 w6 E2 W/ \- g W9 |

/ e. X" i0 y4 T2 q: h$ l9 H! z" ]
至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下
H% _9 K, @1 z8 O
下面讲解一些高级参数

1、滑动条如何控制让用户点击还是滑动 8 F8 \$ ~' \4 j W) p! P d
在<div class="slidebar"> 中加入参数 （鼠标滑动）mevent="mouseover" 或 （鼠标点击）mevent="click"
完整代码如下 以下代码实现 点击后变换
· <div class="slidebar" mevent="click">
· [loop1]<span>{currentorder}</span>[/loop1]
· </div>

复制代码6 F( ?- f! e4 J0 G1 r: D A9 C

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

2010-9-25 12:18 上传# A+ C3 m( a: Y$ E
下载附件 (759 Bytes)
* W7 b5 x2 Y/ D" P4 }! c5 A8 a2 J* Q

2 @& A& D. t; ]

5 Z3 l7 K3 J0 g1 [ _( C m
! h% _$ N+ ~6 d' {0 _( `8 p
添加如下代码即可实现3 C2 s6 q' ?8 }$ Z% [4 ]
· <div class="slidebarup">
· <span>up</span>
· </div>
· <div class="slidebardown">
· <span>down</span>
· </div>4 G; N$ ^, t# z
) i# p' j4 Y' ~) W# R
复制代码
标签为 class="slidebarup" 的为上一个 标签为 class="slidebardown" 的为下一个

3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法 在需要展示的地方增加如下代码* ?: G9 ?' e ^% d- U
· <div class="slideother">
· <span>可以是任何内容</span>
· </div>
/ U! D4 F! z! O/ Y' Q6 U
复制代码5 Y+ K' K( P' H- p( D$ q
同时支持多个slideother 如下代码
9 w" o9 m: S8 ?+ y+ s
· <div class="slideother">
· <span>内容一</span>
· </div>
· <div class="slideother">
· <span>内容二</span>
· </div>

复制代码- o: D; X4 \+ x$ u k, V5 @0 C
4、如何控制幻灯片播放的速度
在<div class="slidebox" >增加参数 如下代码 其中 timestep="3000" 为毫秒
· <div class="slidebox" timestep="3000">' M& E* c9 x4 S5 d9 _' j
0 j% \1 m: U/ U8 x
复制代码

5、如何实现 一次显示多个图片，每次切换多个 如下图样式
! |( [; Z: h2 M$ u

2010-9-25 13:40 上传
下载附件 (13.52 KB) & }, i ?, `. |2 S8 R
+ I7 {1 K2 W. d* I2 [) s3 X$ b5 m3 \

# U/ }( j- H) \7 W; S
/ S2 j q8 H- K' q) I) P6 R

在<div class="slidebox" >增加参数 如下代码 / ^7 v9 x; a" n! k6 c3 N
# C/ R. v" g; }+ h6 e3 L9 ?3 ]5 J: H
· <div class="slidebox" slidenum="3" slidestep="1">* C+ p) P9 ]2 @: y) G8 h' a
8 P' m- M" e! A( ]1 c
复制代码) u- k" l& ~+ C. X/ X1 X
其中 slidenum="3" 表示显示数量 ， slidestep="1" 表示每点击一次左右按扭 移动的次数
2 o6 x: C$ g7 ]( X

以上为幻灯片的所有功能: ~. b8 `! I& w5 ~" t. v
" S8 B9 y+ b# u) f" ` a2 I
下面提供演示站点中门户及频道所用到的幻灯片代码 （大家可以参照所提供的代码制作出炫丽的幻灯片）
9 Y) T% ?/ Z3 |( H8 w; d( @4 Y
以下所示效果都需要CSS配合, s& q' G1 p& [( W9 V
$ N( D s: y/ ~% I. @7 T( A, C
效果一

2010-9-25 13:52 上传
下载附件 (48.82 KB) 6 E" _+ j* M' |0 T8 t, o

" D- x0 D0 w( b. q# Q# x, u! p
: j% @# q J2 q; ^6 G" E% K& y

实现代码

· <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>

复制代码

效果二: V6 h1 i: |& o' I0 W z- e/ b4 y

2010-9-25 13:55 上传$ a' i/ S; i) C9 w0 M, y- l
下载附件 (6.85 KB)
. W K! b3 j; R

- B# X a1 e% M
( n3 q* ^ h5 c: D* `
5 g& o \/ B: g' q; { r7 x

实现代码
· <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>

复制代码5 I$ k F* Q/ W# Z

效果三! E* |# M+ G# `, K7 Q0 o2 u
5 y6 g# G1 V( O" Q3 u4 U; t3 T( g

2010-9-25 13:58 上传
下载附件 (13.61 KB) / {& v. w! z3 g x) X
" T; y+ j! ^5 R1 y
7 ~7 P% K2 E6 o6 |8 U$ S

7 b" L+ J. X" F Q+ l
4 P. u, S( h0 O6 k6 O% B9 |
实现代码3 T% F8 K2 K6 {* J% g% `

· <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>
· - I+ m6 I, Z% z3 g
7 i7 k0 B5 B! r7 z7 x0 O
复制代码

效果四
+ ~6 ~! \* p' Y

2010-9-25 14:02 上传7 {4 \4 H- p* X. X& o
下载附件 (30.53 KB) - D3 x6 Y/ Y; a' y* y! E

2 ]' L: d* ]. [0 B
: l) l2 s' U5 Q W1 c2 d
2 p4 @' r; ?- _( ?" R I, W1 Q( I' ^/ v

实现代码
7 `6 S: N4 b# a% J5 d
· <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>2 P; [& T7 `6 Q

复制代码. U1 `- |* T% ]/ \/ A$ a4 f* n9 u) \

效果五

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

8 P' R# \- C8 Q9 |+ `
# t5 t* L+ T3 }) s# i" k, b9 r

+ w9 z- _0 D0 \; H
实现代码# L/ S0 V8 U9 g/ R; l* H' M
* @! X8 }5 Y, S6 a: i: t
· <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>

复制代码; f5 c0 e3 n& _& l) h" g6 F

效果六 D! \; w1 }/ ]7 b5 U& ], Y

2010-9-25 14:09 上传( j% G; Z6 f D$ p' \" u" @
下载附件 (45.85 KB) / P* o6 q1 \. K3 D9 [8 t: i0 Y
) u9 b# H$ N& [7 U

; k+ i. q+ t# m+ U# m, f3 x$ B7 m# C4 |
5 f1 n! v* ?% q4 U
实现代码, V0 |, b* n, H/ L9 W! @

· <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>. c: E7 H# w1 J4 r" y* ^
: P3 f/ C+ h# B$ w, X* p; W$ J
复制代码% g- _5 N' u& U* X `' G) D
P3 O) W6 e9 y
效果七7 x2 y3 O! B5 X3 U

2010-9-25 14:12 上传
下载附件 (14.85 KB) / l7 h: s0 b) Y0 D1 Z1 o

( ]- ^. p( g) n

3 I6 J) m" D$ ? I, V( @$ U
实现代码
+ I. S$ r7 F; I
· <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>$ r2 k8 A% K: i
0 F' I. r3 E H0 k5 g
复制代码

效果八

2010-9-25 14:15 上传
下载附件 (68.99 KB) 4 k! w1 [& j6 g Z9 T% m! g

, R+ E, B5 R8 l& f3 A4 m6 O
3 j; y* L& K3 v! ^. A/ Q

实现代码
1 {: M5 w1 g/ c$ S8 \
· <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" />
·