|
在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片 请跟随教程从头到尾仔细阅读，你将收获不小
第一步制作幻灯片：后台--》门户--》模块模板
点击 添加按扭 如下图所示
此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类
下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”
把代码框里面的内容全部删除
接下来 我们输入代码
首先在代码框里面输入
1. <divclass="slidebox"></div>
复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例
此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记
如下图所示
接下来，我们增加幻灯代码 下面代码用来实现图片（或内容）的显示作用 属性必须为class="slideshow"的标签
1. <divclass="slideshow"></div>
复制代码
上面的代码必须放在class="slidebox"的属性的标签里面 上面已经讲过，完整代码如下
1. <divclass="slidebox"> 2. 3. <divclass="slideshow"></div> 4. 5. </div>
复制代码
接下来我们来增加“滑动”、“点击”的代码
1. <divclass="slidebar"></div>
复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过，完整代码如下
1. <divclass="slidebox"><!--幻灯片开始--> 2. 3. <divclass="slideshow"> </div><!--图片展示--> 4. 5. <divclass="slidebar"> </div><!--幻灯片控制展示--> 6. 7. </div><!--幻灯片结束-->
复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码
在<divclass="slideshow"> </div> 代码中间插入图片显示代码
如下代码
1. <divclass="slideshow"><img src="{pic}"width="{picwidth}" height="{picheight}" /></div><!--图片展示-->
复制代码
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量
接下来为图片增加循环代码 如下代码
1. [loop] 2. <imgsrc="{pic}" width="{picwidth}"height="{picheight}" /> 3. [/loop]
复制代码
完整代码如下
1. <divclass="slidebox"><!--幻灯片开始--> 2. <divclass="slideshow"> 3. [loop] 4. <imgsrc="{pic}" width="{picwidth}"height="{picheight}" /> 5. [/loop] 6. </div> 7. <!--图片展示--> 8. <divclass="slidebar"> </div><!--幻灯片控制展示--> 9. </div><!--幻灯片结束-->
复制代码
接下来 为滑动条增加数字
在<div class="slidebar"> </div>中增加娄字变量 如下代码
1. <divclass="slidebar"> 2. [loop1]<span>{currentorder}</span>[/loop1] 3. </div>
复制代码
其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的
较后增加脚本代码 如下 以下代码放在模块代码的较后
1. <scripttype="text/javascript"> 2. runslideshow(); 3. </script>
复制代码
此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下
1. <divclass="slidebox"><!--幻灯片开始--> 2. <divclass="slideshow"> 3. [loop] 4. <imgsrc="{pic}" width="{picwidth}"height="{picheight}" /> 5. [/loop] 6. </div> 7. <!--图片展示--> 8. <divclass="slidebar"> 9. [loop1]<span>{currentorder}</span>[/loop1] 10.</div><!--幻灯片控制展示--> 11.</div><!--幻灯片结束--> 12. 13.<script type="text/javascript"> 14.runslideshow(); 15.</script>
复制代码
如下图所示
此时我们就可以通过前台DIY调用了
如下图所示 调用
显示效果
至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下
下面讲解一些高级参数
1、滑动条如何控制让用户点击还是滑动
在<divclass="slidebar"> 中加入参数 （鼠标滑动）mevent="mouseover" 或 （鼠标点击）mevent="click"
完整代码如下 以下代码实现点击后变换
1. <divclass="slidebar" mevent="click"> 2. [loop1]<span>{currentorder}</span>[/loop1] 3. </div>
复制代码
2、如何实现上一个 下一个的效果 如下图样式
添加如下代码即可实现
1. <divclass="slidebarup"> 2. <span>up</span> 3. </div> 4. 5. <divclass="slidebardown"> 6. <span>down</span> 7. </div>
复制代码
标签为 class="slidebarup" 的为上一个 标签为 class="slidebardown" 的为下一个
3、当 slideshow的内容展示不全或 不在一个区域时我们提供了 更多内容的展示方法 在需要展示的地方增加如下代码
1. <divclass="slideother"> 2. <span>可以是任何内容</span> 3. </div>
复制代码
同时支持多个slideother 如下代码
1. <divclass="slideother"> 2. <span>内容一</span> 3. </div> 4. 5. <divclass="slideother"> 6. <span>内容二</span> 7. </div> 8.
复制代码
4、如何控制幻灯片播放的速度
在<divclass="slidebox" >增加参数 如下代码 其中timestep="3000" 为毫秒
1. <divclass="slidebox" timestep="3000">
复制代码
5、如何实现 一次显示多个图片，每次切换多个 如下图样式
在<div class="slidebox" >增加参数 如下代码
1. <divclass="slidebox" slidenum="3"slidestep="1">
复制代码
其中 slidenum="3" 表示显示数量 ， slidestep="1" 表示每点击一次左右按扭移动的次数
以上为幻灯片的所有功能
下面提供演示站点中门户及频道所用到的幻灯片代码 （大家可以参照所提供的代码制作出炫丽的幻灯片）
以下所示效果都需要CSS配合
效果一
实现代码
1. <divclass="slidebox"> 2. <divclass="slideshow"> 3. [loop] 4. <a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}" /></a> 5. [/loop] 6. </div> 7. <divclass="bignews_btns"> 8. <div class="btns slidebar"> 9. [loop1] 10. <em></em> 11. [/loop1] 12. </div> 13. <div class="desc slideother"> 14.[loop2] 15. <ahref="{url}"{target}>{title}</a> 16.[/loop2] 17.</div> 18. </div> 19.</div> 20.<script type="text/javascript"> 21.runslideshow(); 22.</script>
复制代码
效果二
实现代码
1. <divclass="slidebox" timestep="3000"> 2. <divclass="thumb on slideshow" > 3. [loop] 4. <span> 5. <ahref="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a> 6. <p><ahref="{url}"{target}>查看</a></p> 7. </span> 8. [/loop] 9. </div> 10. <divclass="product_desc"> 11. <div class="on slideother" > 12. [loop1] 13. <span> 14. <h2 class="title"><ahref="{url}"{target}>{title}</a></h2> 15. <p>{summary}</p> 16. </span> 17. [/loop1] 18. </div> 19. <div class="product_price on slideother" > 20. [loop2] 21. <span>{dateline}</span> 22. [/loop2] 23. </div> 24. <div class="btns slidebar"> 25. [loop3]<em>{currentorder}</em>[/loop3] 26. </div> 27. </div> 28. </div> 29.<script type="text/javascript"> 30.runslideshow(); 31.</script>
复制代码
效果三
实现代码
1. <divclass="slidebox" slidenum="3" slidestep="1" > 2. <divclass="leftbtn slidebarup"><ahref="javascript:void(0);" mevent="click" ><imgsrc="template/default/portal/index/images/commend_bg_2_leftbtn.gif"/></a></div> 3. <div class="middle cl" > 4. <ul class="slideshow"> 5. [loop]<li><ahref="{url}"{target}><img src="{avatar_big}"width="{picwidth}" height="{picheight}"/></a><p><ahref="{url}"{target}>{title}</a></p></li>[/loop] 6. </ul> 7. </div> 8. <divclass="rightbtn slidebardown "><ahref="javascript:void(0);" mevent="click"><imgsrc="template/default/portal/index/images/commend_bg_2_rightbtn.gif"/></a></div> 9. </div> 10.<script type="text/javascript"> 11.runslideshow(); 12.</script> 13.
复制代码
效果四
实现代码
1. <divclass="photobox cl slidebox" timestep="3000"> 2. <divclass="z leftbtn"> 3. <span>美食大赏</span> 4. <divclass="slidebar"> 5. [loop] 6. <em></em> 7. [/loop] 8. </div> 9. </div> 10. <divclass="y rightpic"> 11. <div class="slideshow"> 12.[loop1] 13. <div> 14. <a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}" /></a> 15. <p><ahref="{url}"{target}>{title}</a></p> 16. </div> 17.[/loop1] 18. </div> 19. </div> 20. </div> 21.<script type="text/javascript"> 22.runslideshow(); 23.</script>
复制代码
效果五
实现代码
1. <divclass="z slidebox"> 2. <divclass="box slideshow"> 3. [loop] 4. <div> 5. <ahref="{url}"{target}><img src="{pic}"width="{picwidth}"height="{picheight}" /></a> 6. </div> 7. [/loop] 8. </div> 9. <div class="box_btn clslidebar"> 10. [loop1] 11. <div> 12. <span>{title}</span> 13. </div> 14. [/loop1] 15. </div> 16. <divclass="box_desc slideother"> 17. [loop2] 18. <p> 19. <ahref="{url}"{target}>{summary}</a></p> 20. [/loop2] 21. </div> 22. </div> 23.<script type="text/javascript"> 24.runslideshow(); 25.</script>
复制代码
效果六
实现代码
1. <divclass="bignews slidebox " > 2. <divclass="slideshow">[loop]<ahref="{url}"{target}><img src="{pic}"width="{picwidth}"height="{picheight}"/></a>[/loop]</div> 3. <divclass="btns slidebar"> 4. [loop1] 5. <em>{currentorder}</em> 6. [/loop1] 7. </div> 8. </div> 9. <scripttype="text/javascript"> 10.runslideshow(); 11.</script>
复制代码
效果七
实现代码
1. <divclass="slidebox "> 2. <divclass="slideshow">[loop]<a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}"/></a>[/loop]</div> 3. <dd class="slidebar"> 4. [loop1] 5. <em><ahref="#"><imgsrc="template/default/portal/food/images/num/0{currentorder}.gif"/></a></em> 6. [/loop1] 7. </dd> 8. <div class="slideother"> 9. [loop2] 10. <div><div class="title"> 11. <a href="{url}"{target}>{title}</a> 12. </div> 13. <p> 14. {summary} 15. </p></div> 16.[/loop2] 17. </div> 18.</div> 19.<script type="text/javascript"> 20.runslideshow(); 21.</script>
复制代码
效果八
实现代码
1. <divclass="bignews slidebox"> 2. <div class="picbox slideshow"> 3. [loop]<div><img src="{pic}"width="{picwidth}" height="{picheight}"/></div>[/loop] 4. </div> 5. <divclass="bignews_btn slidebar" mevent="mouseover" > 6. [loop1] 7. <div > 8. <p> 9. <strong><ahref="{url}"{target}>{title}</a></strong> 10. <em>{summary}</em> 11. </p> 12. <img src="{pic}"width="60" height="66" /> 13. </div> 14. [/loop1] 15. </div> 16. </div> 17.<script type="text/javascript"> 18.runslideshow(); 19.</script>
复制代码
效果九
实现代码
1. <divclass="slidebox"> 2. 3. <divclass="slideshow"> 4. [loop] 5. <ahref="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a> 6. [/loop] 7. </div> 8. <div class="btn"> 9. <emclass="slidebarup"><imgsrc="template/default/portal/car/images/bignews_btn_left.gif"/></em> 10. <em class="slidebar">[loop1]<span><imgsrc="template/default/portal/car/images/empty_img.gif"width="8" height="8"/></span>[/loop1]</em> 11. <em class="slidebardown"><imgsrc="template/default/portal/car/images/bignews_btn_right.gif"/></em> 12. </div> 13. <divclass="bignews_title slideother"> 14. [loop2] 15. <em><ahref="{url}"{target}>{title}</a></em> 16. [/loop2] 17. </div> 18.</div> 19.<script type="text/javascript"> 20.runslideshow(); 21.</script>
复制代码
效果十
实现代码
1. <divclass="slidebox"> 2. <divclass="bignews"> 3. <divclass="slideshow"> 4. [loop] 5. <a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}" /></a> 6. [/loop] 7. </div> 8. </div> 9. <div class="bignewsdesc"> 10. <div class="bignewsbtn"> 11. <em class="slidebarup"><imgsrc="template/default/portal/home/images/bignews_left.gif"/></em> 12. <span class="slidebar"> 13. [loop1] 14. <em>{currentorder}</em> 15. [/loop1] 16. </span> 17. <em class="slidebardown"><imgsrc="template/default/portal/home/images/bignews_right.gif"/></em> 18. </div> 19. <div class="slideother"> 20. [loop2] 21. <dd> 22. <h2><ahref="{url}"{target}>{title}</a></h2> 23. <p><ahref="{url}"{target}>{summary}</a></p> 24. </dd> 25. [/loop2] 26. </div> 27. </div> 28.</div> 29.<script type="text/javascript"> 30.runslideshow(); 31.</script> 32.
| 
