diy幻灯片 for dz3制作教程

　　昨天弄了一下午，由于是第一次，所以很慢，大概从6点弄到7点，然后又从9点弄到10点，之后又调试了1小时，整整3个小时，虽然有点分开，不过最终还是完成了。偶从2月27日开始下载的 2.5rc，之前从来米使用过dz产品，差不多一直以来，都希望自己能够制作模板还有改点功能，看到别人的幻灯漂亮，自己心里羡慕，看到优秀的模板，怪自己不会制作也米钱买下来，所以从5月份那时候起，偶心里就下了决心，既然无意中选择了discuz，那么就一路走下去，只要这个系统还是开源的，偶都会坚持用的，今天秀一下自己的diy幻灯片，不需要插件，因为偶觉得插件不好，发上来，大家先看看，很快还是这个帖子，发个制作教程。 网址：html6game.com

上图：默认幻灯


下图：diy幻灯


　　不过也遇到问题，就是像这样 960_500px 幻灯片，由于图片太大了，前台根本更新不出来，并且高宽也不同，因为帖子那些图片大大小小的，所以图片只能从前台上传，另外还固定了数据。所以论坛文章更新之后，这些图片是不动的，如果要更新，也只能半手动处理下图片尺寸和填写标题{title}摘要{summary}，呵呵。

　　今天有时间，来完善这个教程，下面开始

网站后台：







　　首先在网站后台，门户 - 模块模板 - 添加 帖子模块 模板名称:[DIY]幻灯片，然后代码里面复制下列代码

1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   
2. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   
3. <link rel="stylesheet" href="images/js/slider/html6game_js_slider/css/iview.css" />
   
4. <link rel="stylesheet" href="images/js/slider/html6game_js_slider/css/skin 1/style.css" />
   
5. 
   
6. <div id="cont">
   
7. 
   
8.         <div class="container">
   
9.                 <div id="iview">
   
10. [loop]
    
11.             <div data-iview:image="{pic}" width="{picwidth}" height="{picheight}"  data-iview:transition="left-curtain,right-curtain,top-curtain,bottom-curtain,strip-down-right,strip-down-left,strip-up-right,strip-up-left,strip-up-down,strip-up-down-left,strip-left-right,strip-left-right-down,slide-in-right,slide-in-left,slide-in-up,slide-in-down,fade,block-random,block-fade,block-fade-reverse,block-expand,block-expand-reverse,block-expand-random,zigzag-top,zigzag-bottom,zigzag-grow-top,zigzag-grow-bottom,zigzag-drop-top,zigzag-drop-bottom,strip-left-fade,strip-right-fade,strip-top-fade,strip-bottom-fade,block-drop-random">
    
12.             
    
13.                         <div class="iview-caption" data-x="20" data-y="405" data-transition="wipeRight"><a href="{url}"{target}>{title}</a></div>
    
14.             
    
15.             <div class="iview-caption" data-x="20" data-y="450" data-transition="wipeRight"><a href="{url}"{target}>{summary}</a></div>
    
16.                         </div>
    
17. [/loop]
    
18. 
    
19.                 </div>
    
20.         </div>
    
21. 
    
22. </div>
    
23. 
    
24. <script src="images/js/slider/html6game_js_slider/js/jquery-1.7.1.min.js"></script>
    
25. <script type="text/javascript" src="images/js/slider/html6game_js_slider/js/raphael-min.js"></script>
    
26.                 <script type="text/javascript" src="images/js/slider/html6game_js_slider/js/jquery.easing.js"></script>
    
27. 
    
28. <script src="images/js/slider/html6game_js_slider/js/iview.js"></script>
    
29. <script>
    
30.         jQuery(document).ready(function(){
    
31.                 jQuery('#iview').iView({
    
32.                         pauseTime: 7000,
    
33.                         directionNav: false,
    
34.                         controlNav: true,
    
35.                         tooltipY: -15
    
36.                 });
    
37.         });
    
38. </script>
    
39. 
    
40. <script type="text/javascript" src="images/js/slider/html6game_js_slider/js/jquery.fullscreen.js"></script>
    
41. <script type="text/javascript">
    
42.         jQuery(document).ready(function () {
    
43.                 jQuery("#background-image").fullscreenBackground();
    
44.         });
    
45. </script>
    
46. <script type="text/javascript">
    
47. 
    
48.   var _gaq = _gaq || [];
    
49.   _gaq.push(['_setAccount', 'UA-30854466-1']);
    
50.   _gaq.push(['_trackPageview']);
    
51. 
    
52.   (function() {
    
53.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    
54.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    
55.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    
56.   })();
    
57. 
    
58. </script>

复制代码

网站前台：
　　打开网站后，选择高级模式，然后 添加个 100%框架，模块 - 帖子模块，模块标识：slider 模块分类：帖子模块 数据来源：高级自定义 只接受推送数据 打上勾，显示条数：17 显示样式：[DIY]幻灯片 缩略图宽度：960 缩略图高度：500 链接打开方式：新链接打开，这些都写了之后，就点 数据 - 添加 - 显示位置：1 帖子URL：/thread-633-1-1.html 帖子标题：40个最好的iPhone应用程序网站 附件图片：上传 001.jpg 帖子内容：iPhone应用程序比以往任何时候都更热。那么这些应用程序中脱颖而出，并得到注意吗？ 然后点确定，











　　一共添加 17条数据，注意 显示位置 ID 其实可以直接选择帖子的栏目或文章栏目，但那样获取的图片尺寸刷不到 960_500px这样大，所以这里只能半手动，这个幻灯片是随便找的一个，之前也弄成了非常小的尺寸，感觉不够大气，才改成 960的全屏尺寸，你可以照这个方法，自己找其它的幻灯片，flash javascript幻灯片都可以，只要把幻灯页面代码里面的字段都换成 diy 字段就行，比方，你的幻灯片是静态的代码，肯定有 html文件，打开它，将全部代码里面的 图片{pic} 图片宽度{picwidth} 图片高度{picheight} 链接{url} 内容{summary}和摘要{summary}都替换原来的静态部分，但有的幻灯片非常的复杂，比方偶这种，那就要具体修改，幻灯的css样式，也要修改成网站适合的，其实 discuz X2.5产品的模板制作也不是太难，就是要掌握它的一些字段使用，另外你至少要明白基本的js或jquery用法，那么制作模板也挺容易的，它本身前台的 diy功能相当的强大，希望这个教程能够帮助你建立一个你喜欢的网站幻灯片，或者首页N格之类的滑块效果，它们原理上都是一样的。由于偶也是第一次弄diy幻灯，写得不好，还请大虾多多指点。

相关的一些附件
网盘下载：http://pan.baidu.com/share/link?shareid=80217&uk=2535789224
js幻灯片：
网站前台添加的图片和数据：
将 js幻灯片（html6game_js_slider） 上传至你网站的 /images/js/slider/
演示网址：请回到本帖子最上方 ↑

二楼占位
现在终于用上了，因为又改了个幻灯，方法同上，这里正好放个图片。

001兼容全部浏览器




002兼容 ie7+ 开启了全部 3d 64种 2d 40种切换效果。




003兼容全部浏览器



004兼容（IE7-11） chrome firefox，超过200种切换效果，32套皮肤，硬件GPU加速，视网膜响应（适应全部设备）。

学习啦  

和默认的差不多 不过挺好看的

其实很多直接用插件的人是嫌DIY太麻烦

不错支持你

学习ing 正好用的上 http://www.obei.cn

很不错呀·！怎样做的教下呀。

不错!支持楼主！很详细！