█ 【窝居郑州】超漂亮幻灯片完美支持DIY且自由排序分享同时提供DIY模板[停止发放]

首先声明：如果你只想要一个简单的打包文件直接上传到自己的空间上就能实现这样的效果，请绕行！因为这要涉及一些零碎的操作，而非插件一键安装即可完成！

幻灯片效果图：



页面整体效果图：

具体实现步骤：

1：首先要在后台新建贴子板块模板，代码如下：

1. <DIV id="focus_change_imagebox">
   
2. <UL>
   
3. [loop]
   
4. <li><A href="{url}" target="_blank"><IMG alt="{title}" src="{pic}"></A></li>
   
5. [/loop]
   
6. </UL>
   
7. </DIV>
   
8. <DIV id="focus_change_titlebox">
   
9. <UL>
   
10. [loop1]
    
11. [order1=1]
    
12. <li class=current><A href="{url}" target="_blank">{title}</A><SPAN class="des">{summary}</SPAN></li>
    
13. [/order1]
    
14. <li class=normal><A href="{url}" target="_blank">{title}</A><SPAN class="des">{summary}</SPAN></li>
    
15. [/loop1]
    
16. </UL>
    
17. </DIV>
    
18. <DIV id="focus_change_thumbbox">
    
19. <UL id="focus_change_thumbscroll">
    
20. [loop2]
    
21. [order2=1]
    
22. <li class=current><A href="{url}" target="_blank"><IMG alt="{title}" src="{pic}"></A></li>
    
23. [/order2]
    
24. <li class=normal><A href="{url}" target="_blank"><IMG alt="{title}" src="{pic}"></A></li>
    
25. [/loop2]
    
26. </UL>
    
27. </DIV>

复制代码

保存本代码，名字随意起！

2：然后在需要放置幻灯片的页面模板的指定位置（也就是你让显示幻灯片的位置）中放置一个包含DIY模块代码如下：

1. <script type="text/javascript" src="{$_G[setting][jspath]}indexFocus.js"></script>
   
2. <!--focus_change begin-->
   
3. <DIV id="focus_change">
   
4. <!--[diy=huandengpianTop4]--><div id="huandengpianTop4" class="area"></div><!--[/diy]-->
   
5. </DIV>
   
6. <!--focus_change end-->

复制代码

其中indexFocus.js文件放置在“/static/js/”路径里面，并保证JS引入文件路径正确，具体JS下载请查本文底部

3：保存并更新缓存！

4：开始DIY幻灯片，拉入一个100%的框架，然后在框架中托入贴子模块，我的是这样的，截图说明属性主要配置：



在这里注意的是显示样式就是刚才在后台建的那个贴子幻灯片模板，显示条数一定填写4（如果你想改这个数字，请自行修改本例所用的CSS代码），其它的根据需要自行设定！

PS：设置DIY时一定把框架及模块的边框设为无边框，同时内外边距设为0px，为保证不留多余的空隙！

5：保存DIY，更新刷缓，刷新页面，大功告成！

本幻灯片所用到的资源下载：

BS光下不顶的，原来下载无任何条件限制，现在只好出此下策！请留下你们的邮箱，我会发到需要的朋友的邮箱里面去！

所用的JS文件indexFocus.js：留下你们的邮箱，我一一发到邮箱里面
css文件：留下你们的邮箱，我一一发到邮箱里面
图片文件： (本图片文件请放置对应目录下！)

说明：
对于CSS文件你可以复制代码直接到“/template/default/common/common.css”这个文件的最底部即可
对于图片文件复制直接到“/template/default/common/”目录中
对于本例不包括演示站的幻灯片的外框样式，即外框圆角背景样式！

最后祝大家应用成功，IP多多！

有不明白的地方请跟贴一起讨论，恕不回复短消息！

有空送个IP：http://www.wj371.com
本站初建现诚征兄弟友链！如有意向请跟贴说明！

如果本贴对您还有一点点用处，烦劳你手回复一下！

谢谢大家！

附

一：历时两周风格DIY制作自学经验分享（高手绕行）请移步至: https://discuz.dismall.com/thread-1931527-1-1.html

二：自已利用DZX频道调用投票系统，完美实现投票系统与主站的风格统一 请移步至：https://discuz.dismall.com/thread-1932376-1-1.html

此贴必火，石狮生活论坛支持来了。http://www.362700.cn

你网站很漂亮

IP已送，网站做的非常好。第2步没看明白！能不能详解一下！

回复 xiaoya35 的帖子

其它的地方都明白了，就是第二步不做的怎么走了！不知楼主能不能详细说明一下或者举个例子呢？先谢谢了！

无聊的大叔 发表于 2010-10-24 03:57
IP已送，网站做的非常好。第2步没看明白！能不能详解一下！

同问，第2步没看懂啊，麻烦楼主再仔细说下，谢啦。

2：然后在需要的地方放置一个包含DIY模块代码

这个要修改首页模板吗？怎么修改呢

ip已送 感谢分享

首先感谢大家的支持

第二步的解释如下：

简单地说第二步的代码就是放在你希望幻灯片所在位置

其中：

<script type="text/javascript" src="{$_G[setting][jspath]}indexFocus.js"></script> /*引入本例所用的必需的JS脚本*/

然后：

1. <!--focus_change begin-->  /*本行是注幻灯片开始注释，可以不要*/
   
2. <DIV id="focus_change">  /*本行是幻灯片所在的外层DIV，用于控制样式*/
   
3. <!--[diy=huandengpianTop4]--><div id="huandengpianTop4" class="area"></div><!--[/diy]--> /*本行是在页面中新建DIY的容器代码，其中的两个huandengpianTop4名称相同即可，名称可以根据你的喜好来定，另外，你如果想在任何地方放置可DIY的内容，就直接放置以上格式的代码后就能随意拖拽模块了！*/
   
4. </DIV>  /*幻灯片所在的外层DIV结束*/
   
5. <!--focus_change end-->  /*本行是注幻灯片结束注释，可以不要*/
   

复制代码

回复 xiaoya35 的帖子

谢谢楼主 代码解释的很清楚！ 但还没是没明白具体放哪儿？我后天添加了帖子模块@ 然后首页DIY 选帖子模块儿拖拽到框架里，显示样式就是后台添加的，但第二步的代码怎么用还是不清楚。