dz首页调用幻灯片-16页word资料.doc

《dz首页调用幻灯片-16页word资料.doc》由会员分享，可在线阅读，更多相关《dz首页调用幻灯片-16页word资料.doc（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、如有侵权，请联系网站删除，仅供学习与交流dz首页调用幻灯片【精品文档】第 16 页在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 t2010-9-25 10:48 上传) w, I Q, E: w z3 l0 o3 M下载

2、附件 (12.23 KB) : _7 n. D! 2 z ; q% ; D5 c! q) f* x* D5 b$ f9 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 Z2010-9-25 10:56 上传下载

3、附件 (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首先在代码框里面输入 v/ i! q2 n- w- _& s. o* F/ l. k+ |% w复制代码其中的div可以是任意标签，如table，span等，我们这里以div为例此处的标签必须加一个class=slidebox的属性 如下面代码所示 ，只有包含在有class=slidebox属性的标签里面的内容才是幻灯片 ，切记( C&

4、?+ _8 f( R7 t如下图所示$ t8 F* u2 Q3 p( i. 2 ; z5 S4 0 f9 n2010-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的标签 复制代码上面的代码必须放在 class=slidebox的属性的标签里面 上面已经讲过 ，完整代码如下0 f* M/ e K( x: d0 f7 a0 y, f# X( x$ c* m ) Z m&

5、 B8 f1 |6 i( H9 复制代码+ T) / D& y K* n4 l# 接下来我们来增加“滑动”、“点击”的代码 . P; f( k& D: P& y) p1 x % ?+ z) w% m. a$ r复制代码/ C3 Z, b) u& J0 P! # % f9 J$ G! Z1 Y上面的代码必须放在 class=slidebox的属性的标签里面 上面已经讲过 ，完整代码如下 ; + V1 J* 1 T复制代码以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码 7 O9 O( % o9 i, . A# a$ Q8 J在 代码中间插入图片显示代码0 K5 q2 J: K& A.

6、Y9 如下代码 3 b+ Q6 G8 X& F$ S0 r * ) 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 b2 - H% Z |/ N8 Q5 k% loop /loop复制代码( y& o+ q& ! B4 S% k) b, F8 F完整代码如下 loop /loop # t7 c8 9 A#

7、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. ?在 中增加娄字变量 如下代码 loop1currentorder/loop1 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 以此类推 来实现多处循

8、环的目的 最后增加脚本代码 如下 以下代码放在模块代码的最后% z, u7 y( P, G9 Q$ b4 P% K8 t9 d( U8 runslideshow(); 复制代码- 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 loop /loop loop1currentorder/loop1 runslideshow(); 复制代码( + g) Q: a: 9 $ E如下图所示 L( x, A1 3 6 Y. V5 w4 e2010-9-

9、25 12:01 上传下载附件 (16.18 KB) % I# O( 5 E2 j. A此时我们就可以通过前台DIY调用了 如下图所示 调用! c4 r0 P: ?# E& i; $ M$ F: R1 0 P2010-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# t7 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

10、 Y( I! u2010-9-25 13:46 上传5 N2 m6 S5 E4 T( h; $ e6 R下载附件 (38.19 KB) / m+ q: ) R# w/ / t6 I2 I0 m3 u7 L5 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 在 中加入参数 （鼠标滑动）mevent=mouseover 或 （鼠标点击）mevent=click 完

11、整代码如下 以下代码实现 点击后变换 loop1currentorder/loop1 复制代码6 F( ?- f! e4 J0 G1 r: D A9 C2、如何实现上一个 下一个的效果 如下图样式 2010-9-25 12:18 上传# A+ C3 m( a: Y$ E下载附件 (759 Bytes) * W7 b5 x2 Y/ D P4 ! c5 A8 a2 J* Q2 & 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 up down 4 G; N$ , t# z)

12、 i# p j4 Y ) W# R复制代码标签为 class=slidebarup 的为上一个 标签为 class=slidebardown 的为下一个 3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法 在需要展示的地方增加如下代码* ?: G9 ? e % d- U 可以是任何内容 / 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 内容一 内容二 复制代码- o: D; X4 + x$ u k, V5 0 C4、如何控制

13、幻灯片播放的速度 在增加参数 如下代码 其中 timestep=3000 为毫秒 M& E* c9 x4 S5 d9 _ j0 j% 1 m: U/ U8 x复制代码5、如何实现 一次显示多个图片，每次切换多个 如下图样式! |( ; Z: h2 M$ u2010-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 在增加参数 如下代码 / 7 v9 x; a n! k6 c3 N# C/ R. v

14、 g; + h6 e3 L9 ?3 5 J: H * C+ p) P9 2 : y) G8 h a8 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以下所示效果都需要

15、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实现代码 loop /loop loop1 /loop1 loop2 title /loop2 runslideshow(); 复制代码效果二: V6 h1 i: |& o I0 W z- e/ b4 y2010-9-25 13:55 上传$ a i/ S; i) C9

16、 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实现代码 loop 查看 /loop loop1 title summary /loop1 loop2 dateline /loop2 loop3currentorder/loop3 runslideshow(); 复制代码5 I$ k F* Q/ W# Z效果三! E* |# M+ G# , K7 Q0 o2 u5 y6 g# G1 V( O Q3 u4 U; t3 T( g2010-9-25 13:58 上传

17、下载附件 (13.61 KB) / & v. w! z3 g x) X T; y+ j! 5 R1 y7 7 P% K2 E6 o6 |8 U$ S7 b L+ J. X F Q+ l4 P. u, S( h0 O6 k6 O% B9 |实现代码3 T% F8 K2 K6 * J% g% looptitle/loop runslideshow(); - I+ m6 I, Z% z3 g7 i7 k0 B5 B! r7 z7 x0 O复制代码效果四+ 6 ! * p Y2010-9-25 14:02 上传7 4 4 H- p* X. X& o下载附件 (30.53 KB) - D3 x6 Y/

18、Y; a y* y! E2 L: d* . 0 B: l) l2 s U5 Q W1 c2 d2 p4 r; ?- _( ? R I, W1 Q( I / v实现代码7 6 S: N4 b# a% J5 d 美食大赏 loop /loop loop1 title /loop1 runslideshow(); 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 D

19、0 ; H实现代码# L/ S0 V8 U9 g/ R; l* H M* ! X8 5 Y, S6 a: i: t loop /loop loop1 title /loop1 loop2 summary /loop2 runslideshow(); 复制代码; f5 c0 e3 n& _& l) h g6 F效果六 D! ; w1 / 7 b5 U& , Y2010-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

20、, f3 x$ B7 m# C4 |5 f1 n! v* ?% q4 U实现代码, V0 |, b* n, H/ L9 W! loop/loop loop1 currentorder /loop1 runslideshow(); . 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 U2010-9-25 14:12 上传下载附件 (14.85 KB) / l7 h: s0 b) Y0 D1 Z1 o( - . p( g) n3

21、 I6 J) m D$ ? I, V( $ U实现代码 + I. S$ r7 F; I loop/loop loop1 /loop1 loop2 title summary /loop2 runslideshow(); $ r2 k8 A% K: i0 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 O3 j; y* L& K3 v! . A/ Q实现代码1 : M5 w1 g/ c$ S8 loop/loop loop1 title summary img src=pic width=60 height=6