admin 管理员组

文章数量: 887021


2024年2月25日发(作者：inputnotsupported开机就黑屏)

DZ（Discuz）百变幻灯片，完全DIY

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

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

点击 添加按扭 如下图所示

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

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

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

接下来 我们输入代码

首先在代码框里面输入

复制代码

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

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

如下图所示

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

复制代码

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

复制代码

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

复制代码

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













复制代码

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

在

代码中间插入图片显示代码

如下代码



height="{picheight}" />

复制代码

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

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



[loop]





[/loop]

复制代码

完整代码如下







[loop]





[/loop]









复制代码

接下来 为滑动条增加数字

在

中增加娄字变量 如下代码





[loop1]{currentorder}[/loop1]



复制代码

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

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



复制代码

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







[loop]





[/loop]









[loop1]{currentorder}[/loop1]









复制代码

如下图所示

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

如下图所示 调用

显示效果

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

下面讲解一些高级参数

1、滑动条如何控制让用户点击还是滑动

在

中加入参数 （鼠标滑动）mevent="mouseover"

标点击）mevent="click"

完整代码如下 以下代码实现 点击后变换





[loop1]{currentorder}[/loop1]



复制代码

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

或 （鼠

添加如下代码即可实现





up









down



复制代码

标签为 class="slidebarup" 的为上一个 标签为 class="slidebardown" 的为下一个

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





可以是任何内容



复制代码

同时支持多个slideother 如下代码





内容一









内容二



复制代码

4、如何控制幻灯片播放的速度

在

增加参数 如下代码 其中 timestep="3000" 为毫秒



在

复制代码

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

在

增加参数 如下代码



复制代码

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

以上为幻灯片的所有功能

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

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

效果一

实现代码







[loop]



width="{picwidth}" height="{picheight}" />



[/loop]









[loop1]





[/loop1]







[loop2]



{title}



[/loop2]









复制代码

效果二

实现代码







[loop]





width="{picwidth}" height="{picheight}" />



查看





[/loop]









[loop1]





href="{url}"{target}>{title}



{summary}





[/loop1]







[loop2]



{dateline}



[/loop2]







[loop3]{currentorder}[/loop3]









复制代码

效果三

实现代码





>

src="template/default/portal/index/images/commend_bg_2_"

/>









href="javascript:void(0);" mevent="click">

src="template/default/portal/index/images/commend_bg_2_"

/>





复制代码

效果四

实现代码







美食大赏





[loop]





[/loop]











[loop1]





width="{picwidth}" height="{picheight}" />



{title}





[/loop1]









复制代码

效果五

实现代码







[loop]





[/loop]







[loop1]





{title}





[/loop1]







[loop2]





{summary}



[/loop2]







复制代码

效果六

实现代码





[loop]

width="{picwidth}" height="{picheight}"/>[/loop]





[loop1]



{currentorder}



[/loop1]







复制代码

效果七

实现代码





[loop]

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





[loop1]



src="template/default/portal/food/images/num/0{currentorder}.gif"

/>



[/loop1]







[loop2]





{title}







{summary}





[/loop2]







复制代码

效果八

实现代码







[loop]

height="{picheight}" />

[/loop]







[loop1]







href="{url}"{target}>{title}



{summary}









[/loop1]







复制代码

效果九

实现代码









[loop]



width="{picwidth}" height="{picheight}" />



[/loop]







class="slidebar">[loop1]

width="8"

src="template/default/portal/car/images/bignews_btn_" />



src="template/default/portal/car/images/empty_"

height="8"/>[/loop1]



src="template/default/portal/car/images/bignews_btn_" />







[loop2]



{title}



[/loop2]







复制代码

效果十

实现代码









[loop]



width="{picwidth}" height="{picheight}" />



[/loop]



src="{pic}"









src="template/default/portal/home/images/bignews_" />





[loop1]



{currentorder}



[/loop1]





src="template/default/portal/home/images/bignews_" />







[loop2]





{title}



{summary}





[/loop2]









复制代码

大家可以参照上面提供的十套代码 仔细研究一下。

百变幻灯 随你而变


本文标签： 代码 幻灯片 图片 复制 实现

版权声明：本文标题：DZ(Discuz)百变幻灯片,完全DIY 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1708792555h531492.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

更多相关文章

ps图片拖不进去_ps不能直接把图片拖进去怎么办

2月前

每当用户需要对图片进行深入修改时，ps软件无疑是最好的选择，如今越来越多的用户都开始熟悉ps软件的操作，可是为了能够提高操作效率，我们在选择想要修改的图

Windows照片查看器无法打开此图片怎么办

2月前

在使用Windows图片查看其打开图片文件时，如果提示“无法打开此图片”信息，那么该怎么解决呢？请看下面的详细解决办法。 Windows照片查看器无法打开此图片怎么办出

如何用代码从 ChatGPT 网页中获取原始 Markdown 格式？

2月前

ChatGPT 在输出消息时，会将 Markdown 格式解析成 HTML，虽然可以点击复制按钮去复制原始的 Markdown，但是用代码操作时，却无法

编写可读性代码的艺术

2月前

原文地址： http:wwwblogsgreeenplacearticles4667830.html PDF文件下载地址： http:download.csdndetail

利用手机摄像头采集图片运行ORB-SLAM2

2月前

一、ROS配置安装 二、ORB_SLAM2配置安装 可参考前文   ROS仿真环境安装与配置_身在江湖的郭大侠的博客-CSDN博客 三、Android手机摄像头与ROS建立通信 GitHub有个开源的项目，可以通

Fortify、Checkmarx（代码审计）

2月前

目录 一、Fortify介绍 1、Fortify简介 2、Fortify原理 3、Fortify SCA引擎介绍： 4、Fortify支持语言 二、Fortify下载 三、Fortify安装 1、双击exe文件 2、点击ne

在window平台大模型LoRA微调实战（完整代码带数据）

2月前

一 大模型LoRA微调环境 1 LORA微调环境： 关键硬件配置 ：3060显卡 12G的显存 操作系统：window 10  64位 开发工具：

黑客病毒软件黑客病毒代码-入门渗透自学路线

2月前

黑客病毒软件黑客病毒代码-入门渗透自学路线 最近的勒索病毒是由黑客利用系统漏洞对用户的电脑进行攻击的一种黑客病毒攻击手段，那么史上还有哪些病毒是黑客制造出来的呢?以下是CN人才小编为您收集整理提供到的黑客病毒排行榜

黑客病毒代码黑客病毒前缀名一般为-小白黑客自学

2月前

黑客病毒代码黑客病毒前缀名一般为-小白黑客自学 今天小编为了提高大家的电脑安全知识，为大家带来了计算机病毒的历史和世界十大网络病毒排名，让大家见识下电脑病毒的厉害；下面世

计算机配件图片大全,笔记本电脑配件大全

2月前

现如今 笔记本电脑 可以说成为了电脑界的新宠儿，它便于携带，可以说是它的一大利器，虽然性能上不能和同级别的台式电脑相抗衡，但是想带到哪就带到哪的特性可以

【历史上的今天】6 月 25 日：笔记本之父诞生；Windows 98 发布；通用产品代码首次商用

2月前

整理 | 王启隆 透过「历史上的今天」，从过去看未来，从现在亦可以改变未来。 今天是 2022 年 6 月 25 日，在 1951 年的今天，世界上第

html整人js代码大全,这几行 javascript 代码能让你的浏览器崩溃？

2月前

这几行 javascript 代码能让你的浏览器崩溃？ 上Demo，想先看效果的可以先戳一下链接：Crash当然自己不想点也可以把链接发给小伙伴 — http:lab.z

OpenAI ChatGPT 图片生成API

2月前

图像生成 了解如何使用 DALL·E 在 API 中。 想要在 ChatGPT 中生成图像？前往 chat.openai。 介绍 图像 API 提供了三种与图像交互的方法： 基于文本提示从头

10代cpu装win7_蓝屏解决：新机WIN10改WIN7系统出现蓝屏代码0x000000a5的解决？

1月前

[文章导读]大家都知道2017年后intel出了第七、八代酷睿处理器，现在遇到一个经常网友问到的问题，就是intel 7代cpu以上预装的都是windows10系统，由于windows10系统还没稳定，很多网友想装win7系统，但由于int

新安装的docker daemon.json位置_使用Docker打包代码配置记录

1月前

由于需要将环境和代码打包到Docker中放到其他机器运行，又被无情地消耗了一个周末。听闻大佬说，能将别人不懂的东西，使用通俗易懂的语言解释清楚让别人理解，也是一种能力。因此，特作文以记之。 基本概念 Docker 包括三个基本概念: 镜像（

Windows照片查看器无法显示此图片，因为计算机上的可用内存可能不足。

1月前

用的是在网上搜到的这个方法： 进入控制面板，查看方式用小图标， 选择颜色管理，选择高级， 将设备配置文件改为&#xff1a

GetLastError 函数错误信息 代码大全

1月前

〖0〗-操作成功完成。 〖1〗-功能错误。 〖2〗-系统找不到指定的文件。 〖3〗-系统找不到指定的路径。 〖4〗-系统无法打开文件。 〖5〗-拒绝访问。 〖6〗-句柄无效。 〖7〗-存储控制块被损坏。 〖8〗-存储空间不足&#xf

python编的程序转换成android可执行代码_有python代码怎么编成可执行的exe程序?

10天前

用python编写程序可以编译成exe文件吗 Windows下怎么把python脚本编译成exe母亲用她那柔弱的双肩支撑起了多少个破碎的家，母亲用她那深邃的眼眸拯救了多少个无望的灵魂，母亲用她那坚

OpenAI全面开放免费可用的Canvas？支持文章、代码、图片协作

1天前

前言 今天是 OpenAI 十二天连更的第四天，OpenAI 正在革新生产力！ 跟前几天的发布一样，今天的新功能已经上线。 OpenAI 早在 10 月宣布的"

Windows照片查看器无法显示此图片，因为计算机上的可用内存可能不足。Win7图片打不开 提示内存不足

1天前

原因：图片内嵌了ICC文件 方法二：（非常好用）1、下载免费的命令行程序exiftool.exe 2、新建Remove-icc.bat文件 内容为ex

发表评论

全部评论 0
暂无评论
CopyRight © 2022 All Rights Reserved.
Powered By 技术交流 – FreeNAS中文网| 浙ICP备08016383号-4 友情链接： 网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22 网站地图23 网站地图24 网站地图25 网站地图26 网站地图27 网站地图28 网站地图28 网站地图30 网站地图31 网站地图32 网站地图33 网站地图34 网站地图35 网站地图36 网站地图37 网站地图38 网站地图39 网站地图40 网站地图41 网站地图42 网站地图43 网站地图44 网站地图45 网站地图46