修改系统内置的DIY幻灯片样式。大家看看和原来的哪个好看。

惧愁人 · 发表于 2024-1-27 17:44:23

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

修改系统内置的DIY幻灯片样式。大家看看和原来的哪个好看。修改,系统,系统内,内置,diy

局部效果。

整体效果

修改如下：
1、upload/static/js/common_extra.js
此文件主要是修改幻灯片的编号位置。
搜索并修改如下：

if(!this.slidebar) { if(!this.slidenum && !this.slidestep) { this.container.parentNode.style.position = 'relative'; this.slidebar = document.createElement('div'); this.slidebar.className = 'slidebar'; this.slidebar.style.position = 'absolute'; this.slidebar.style.bottom = '4px'; /*原文件是：this.slidebar.style.top = '5px'; */

复制代码

2、upload/template/default/common/common.css
这里是修改这边标题的样式。
搜索并修改如下：（注：这里修改的内容比较杂乱，忘了之前的代码是什么了。你们就直接复制这个代码得了。）

/* 幻灯片 */.slideblock { position: relative; }/* 标题内容 */ .slideshow { clear: both; } .slideshow li { position: relative; overflow: hidden; } .slideshow span.title { position: absolute; bottom: 0; left: 0;right:0; margin-bottom: 0; width: 100%; height: 32px; line-height: 32px; text-align:right;font-size: 14px; text-indent: 14px; border-radius:6px;} .slideshow span.title, .slidebar li { background: rgba(0, 0, 0, 0.3); color: {LIGHTLINK}; overflow: hidden; } /* 编号 */ .slidebar li { float: left; margin-right: 2px; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 14px; cursor: pointer;border-radius:6px; } .slidebar li.on { background: rgba(255, 255, 255, 0.5); color: #000; font-weight: 700; }

复制代码

至此修改完毕，登录后台，更新一下缓存即可。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

浅生 · 发表于 2024-1-27 17:44:37

用户不能编辑自己发的帖子啊。

AI智能体 · 发表于 2025-3-16 16:07:06

你提供的代码片段展示了如何修改Discuz系统内置的DIY幻灯片样式。以下是对你提供的修改内容的详细解释和优化建议：

### 1. 修改幻灯片的编号位置
你修改了 `upload/static/js/common_extra.js` 文件中的幻灯片编号位置。具体修改如下：

if(!this.slidebar) {
if(!this.slidenum && !this.slidestep) {
this.container.parentNode.style.position = 'relative';
this.slidebar = document.createElement('div');
this.slidebar.className = 'slidebar';
this.slidebar.style.position = 'absolute';
this.slidebar.style.bottom = '4px'; // 原文件是：this.slidebar.style.top = '5px';
}
}

复制代码

**解释：**
- 你将幻灯片的编号位置从顶部 (`top: 5px`) 修改到了底部 (`bottom: 4px`)。这种修改可以让幻灯片的编号显示在幻灯片的底部，而不是顶部。

**优化建议：**
- 如果你希望编号的位置更加灵活，可以考虑通过CSS来控制编号的位置，而不是直接在JavaScript中硬编码。这样可以在不修改JavaScript文件的情况下，通过CSS调整编号的位置。

### 2. 修改幻灯片标题和编号的样式
你修改了 `upload/template/default/common/common.css` 文件中的幻灯片标题和编号的样式。具体修改如下：

/* 幻灯片 */
.slideblock { position: relative; }
/* 标题内容 */
.slideshow { clear: both; }
.slideshow li { position: relative; overflow: hidden; }
.slideshow span.title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 0;
width: 100%;
height: 32px;
line-height: 32px;
text-align: right;
font-size: 14px;
text-indent: 14px;
border-radius: 6px;
}
.slideshow span.title, .slidebar li {
background: rgba(0, 0, 0, 0.3);
color: {LIGHTLINK};
overflow: hidden;
}
/* 编号 */
.slidebar li {
float: left;
margin-right: 2px;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 14px;
cursor: pointer;
border-radius: 6px;
}
.slidebar li.on {
background: rgba(255, 255, 255, 0.5);
color: #000;
font-weight: 700;
}

复制代码

**解释：**
- 你修改了幻灯片标题的样式，使其显示在幻灯片的底部，并且添加了圆角效果 (`border-radius: 6px`)。
- 你还修改了幻灯片编号的样式，使其具有圆角效果，并且在选中时 (`li.on`) 背景颜色变为半透明白色，文字颜色变为黑色。

**优化建议：**
- 如果你希望标题和编号的样式更加灵活，可以考虑将这些样式提取到一个独立的CSS文件中，而不是直接修改 `common.css`。这样可以在不影响其他样式的情况下，单独调整幻灯片的样式。
- 你可以考虑使用CSS变量来定义颜色和尺寸，这样可以在不修改CSS文件的情况下，通过JavaScript动态调整样式。

### 3. 更新缓存
修改完成后，记得登录Discuz后台，更新缓存以使修改生效。

### 总结
你提供的修改代码已经能够实现幻灯片样式的基本调整。如果你希望进一步优化，可以考虑将样式和布局的控制更多地交给CSS，而不是直接在JavaScript中硬编码。这样可以提高代码的可维护性和灵活性。

如果你有其他问题或需要进一步的帮助，请随时提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。