幻灯片不仅可以展示图片的完美效果,吸引视觉感,而且可以展示更多的信息,留住用户。通常的方法是使用JQ等代码来做,但容易导致JQ和默认的JS冲突(jQuery和discuz js文件冲突解决办法),今天在道勤网分享使用discuz默认的DIY来实现调用幻灯片,以及各种不同的效果如何制作幻灯片。 一、幻灯片的制作流程: 1、制作幻灯片DIY模块:后台--》门户--》模块模板,点击 添加按扭,如下图所示: 此处可以可以选择不同的模块分类,如:附件类、帖子类、文章类、图片类等等,可以根据你的需要选择不同的模块分类。 下面我们以文章类为例来讲解,选择文章分类,点提交,如下图所示。为新建的模块起个名字 如 “百变幻灯片” ,把代码框里面的内容全部删除 。 1.1、我们输入代码 ,首先在代码框里面输入:
1.2、我们增加幻灯代码,下面代码用来实现图片(或内容)的显示作用,属性必须为class="slideshow"的标签。
1.4、为图片增加循环代码,如下代码:
在<div class="slidebar"> </div>中增加娄字变量,如下代码:
1.6、增加脚本代码, 以下代码放在模块代码的最后:
2、此时我们就可以通过前台DIY调用做好的幻灯片模块了 ,如下图调用所示: 3、显示效果如下图所示: 至此简易幻灯片就完成了,需要你通过CSS样式来配合美化一下。 二、下面讲解一些高级参数 1、滑动条如何控制让用户点击还是滑动 在<div class="slidebar"> 中加入参数,(鼠标滑动)mevent="mouhtml" target="_blank" class="relatedlink">seover" 或 (鼠标点击)mevent="click",完整代码如下,以下代码实现点击后变换:
添加如下代码即可实现:
3、当 slideshow的内容展示不全或不在一个区域时,我们提供了更多内容的展示方法,在需要展示的地方增加如下代码:
在<div class="slidebox" >增加参数,,其中 timestep="3000" 为毫秒,如下代码:
在<div class="slidebox" >增加参数,如下代码:
以上为幻灯片的所有功能,你可以根据需要组合不同的需求,再配合CSS做出各类幻灯片效果。 三、下面提供演示站点中门户及频道所用到的幻灯片代码 (大家可以参照所提供的代码制作出炫丽的幻灯片) 以下所示效果都需要CSS配合 1、效果一: DIY模块实现代码
DIY模块实现代码
DIY模块实现代码
DIY模块实现代码
DIY模块实现代码
DIY模块实现代码
DIY模块实现代码
DIY模块实现代码
DIY模块实现代码
|
关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )
GMT+8, 2024-11-24 19:18