DZX 首页幻灯，可以适用到各个模块，支持DIY，附带教你使用。

这个是老外的一个源码，感觉效果不错，拿来用用，写出方法，希望大家能举一反三，这个幻灯可以使用到帖子类，附件类，文章类，图片类等等等等的模块，你只需要在后台添加就OK，怎么添加代码我会详细的解释的。。而且这个幻灯可以当空间的图片展示来用哈，如果你对CSS了解的话，完全可以改改，再改改模板 。。。

首先看看最后幻灯的效果：





就这样的效果了，这个效果是可控的，我一步步来操作，具体代码解释看二楼，三楼准备更新教你怎么改样式或应用到其它，这个得看大家是不是真需要了、、

昨天我将下载的设置了个隐藏，今天看了下回复，有点失望的说，我原以为大家能一起研究或完善下，但是发现回帖也只是单纯的为了下东西而已，感觉到 DZ 现在已经不需要这样的帖了，所以三楼不在更新了，现在去掉隐藏的内容，随便下吧，图片那加上 width="{picwidth}" height="{picheight}"  可以解决一些问题

提示大家一下，这个改改可以做出 PW8 的那个首页幻灯的效果，也可以做出迅雷看看的首页幻灯效果 。。。。。。

我不在继续关注这个帖子了，附件也去掉隐藏了，该沉就沉吧。发教程贴教修改也是吃力不讨好，还是拿来就用才是最好的，所以，88。

下载：

咱们一步步来，

首先，解压 幻灯.rar 文件，解压后得出二个文件夹，css 和 scripts ， css 文件夹里面是控制了幻灯的显示样式的，你以后想怎么修改就在这里来改， scripts 是 JS 代码。

在 DZX 的安装根目录建立一个文件夹，文件夹的名字你可以顺便取，然后把解压出来的 css 和 scripts 这二个文件夹复制进去，我建立的文件夹的名为 hd



然后我们来添加代码，到后台，门户 > 模块样式 > 添加 > 选择模块分类里随便选择一个，比如附件类。然后提交



我选择了附件类，提交。

在 样式名称 里 随便取一个好记的名，比如我取的是 我得首页幻灯

然后在下面的框中去掉DZ自动生成的代码，

添加代码：

1. <script src="hd/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
   
2. <script src="hd/scripts/mootools-1.2-more.js" type="text/javascript"></script>
   
3. <script src="hd/scripts/jd.gallery.js" type="text/javascript"></script>
   
4. <link rel="stylesheet" href="hd/css/jd.gallery.css" type="text/css" media="screen" />

复制代码

这个代码的意思是调用我们刚才上传的CSS和JS，注意路径，因为我是在DZ根目录添加了一个 hd 的文件夹，所以我得路径是  src="hd/scripts/  这样的，你的路径是什么，就在这里改成什么

那么，我们怎么加上幻灯的代码呢，其实很简单，我先在下面做个解释，按下面的格式加就成：

1. <div id="myGallery">
   
2. [这里开始循环]
   
3. <div class="imageElement">
   
4. <h3>标题</h3>
   
5. <p>介绍</p>
   
6. <a href="###" title="提示" class="open"></a>
   
7. <img src="这里是图片地址，显示为大图" class="full" />
   
8. <img src="这里是图片地址，显示为小图" class="thumbnail" />
   
9. </div>
   
10. [这里结束循环]
    
11. </div>

复制代码

所以，我加入如下代码，可以对照参考：

1. <div id="myGallery">
   
2. [loop]
   
3. <div class="imageElement">
   
4. <h3>{threadsubject}</h3>
   
5. <p>作者：{author}</p>
   
6. <a href="{threadurl}" title="{threadsubject}" class="open" {target}></a>
   
7. <img src="{pic}" class="full" />
   
8. <img src="{pic}" class="thumbnail" />
   
9. </div>
   
10. [/loop]
    
11. </div>

复制代码

然后，我们添加下控制图片幻灯滚动的代码，这个JS提供了多种方式：

第一种，定时滚动，就是一般的幻灯，能自己切换的，代码如下：

1. <script type="text/javascript">
   
2. function startGallery() {
   
3. var myGallery = new gallery($('myGallery'), {
   
4. timed: true
   
5. });
   
6. }
   
7. window.addEvent('domready', startGallery);
   
8. </script>

复制代码

第二种，非定时滚动，要自己按左右才能切换的，代码如下：

1. <script type="text/javascript">
   
2. function startGallery() {
   
3. var myGallery = new gallery($('myGallery'), {
   
4. timed: false
   
5. });
   
6. }
   
7. window.addEvent('domready', startGallery);
   
8. </script>

复制代码

第三种，不带左右图片切换按钮和显示全部图片按钮的简单定时滚动，代码如下：

1. <script type="text/javascript">
   
2. function startGallery() {
   
3. var myGallery = new gallery($('myGallery'), {
   
4. timed: true,
   
5. showArrows: false,
   
6. showCarousel: false
   
7. });
   
8. }
   
9. window.addEvent('domready', startGallery);
   
10. </script>

复制代码

第四种，不带全部图片显示按钮，必须按左右切换按钮才能切换，代码如下：

1. <script type="text/javascript">
   
2. function startGallery() {
   
3. var myGallery = new gallery($('myGallery'), {
   
4. timed: false,
   
5. showArrows: true,
   
6. showCarousel: false,
   
7. embedLinks: false
   
8. });
   
9. }
   
10. window.addEvent('domready', startGallery);
    
11. </script>

复制代码

上面这四种方式，你可以选择一个来控制，代码加在 <div id="myGallery"> 下面就可以了。

说了这么多，其实就是解释下这些代码是这么回事，最后给个例子，我在附件类加入的代码如下，选择了自动滚动的代码：

1. <script src="hd/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
   
2. <script src="hd/scripts/mootools-1.2-more.js" type="text/javascript"></script>
   
3. <script src="hd/scripts/jd.gallery.js" type="text/javascript"></script>
   
4. <link rel="stylesheet" href="hd/css/jd.gallery.css" type="text/css" media="screen" />
   
5. 
   
6. <div id="myGallery">
   
7. <script type="text/javascript">
   
8. function startGallery() {
   
9. var myGallery = new gallery($('myGallery'), {
   
10. timed: true
    
11. });
    
12. }
    
13. window.addEvent('domready', startGallery);
    
14. </script>
    
15. [loop]
    
16. <div class="imageElement">
    
17. <h3>{threadsubject}</h3>
    
18. <p>作者：{author}</p>
    
19. <a href="{threadurl}" title="{threadsubject}" class="open" {target}></a>
    
20. <img src="{pic}" class="full" />
    
21. <img src="{pic}" class="thumbnail" />
    
22. </div>
    
23. [/loop]
    
24. </div>

复制代码

如果你要控制幻灯的大小，加入：

1. #myGallery
   
2. {
   
3. width: 400px !important;
   
4. height: 200px !important;
   
5. }

复制代码

当然，里面的大小由你控制

如果你要生成缩略图，改这里。然后前台 DIY 的时候填入大小就成：

1. <img src="{pic}"  width="{picwidth}" height="{picheight}" class="full" />

复制代码

留位编辑，。。。。等等

支持啊!!!!!!!!!!!!!

辛苦辛苦

楼主你站现在首页的幻灯片能不能提供出来、

(EM:166:)

呵呵

楼主你站现在首页的幻灯片能不能提供出来、
liunahan0000 发表于 2010-6-10 19:39

那个幻灯就是DZX本身自带的幻灯，我只是改了改样式而已、、、、、、、

辛苦了，收藏中