名站网址导航为广大网友提供关于dz论坛建站教程等内容，论坛安装教程,论坛插件和模板安装教程等。
DZ论坛里经常会有轮播图，我们自己在制作论坛时，也可以自己做轮播图。如下图：
下面名站网址导航介绍一下DZ论坛网站轮播图制作方法。
方法/步骤
1、下载js文件，解压放在images文件下：
https://pan.baidu.com/s/1bnnuTtl
2、在需要显示换灯片的位置,删除原有的具体代码如下，放入DIY具体代码如下：
< div class = "i-focus" id = "iFocus">
<!-- [diy =diyflash9 ]-->< div id = "diyflash9" class = "area">< / div><!-- [ /diy ]-->
< / div>
3、在调用底部文件的具体代码如下上方放上以下的JS具体代码如下来调用JS文件
<!-- {if $_GET [ 'diy' ] ! = 'yes' }-->
< script src = "template/awx/images/js/jquery1.8.3.js" type = "text/javascript">< / script>
< script src = "template/awx/images/js/focusfade.js" type = "text/javascript">< / script>
< script src = "template/awx/images/js/index.js" type = "text/javascript">< / script>
<!-- { /if }-->
4、在DIY中放入以下的具体代码如下【可以根据自己需要设置数量】
< div class = "focus-pic">
< div class = "if-inner">
< ul>
[index = 1 ]
< li style = "background:url(http://www.banban.so/new/20150912.jpg) no-repeat center;">
< div class = "w1240">
< a href = "{url}" target = "_blank" title = "{title}">< img src = "{pic}" alt = "{title}" width = "{picwidth}" height = "{picheight}">< / a>
< / div>
< / li>
[ /index ]
[index = 2 ]
< li style = "background:#f03540; display:none;">
< div class = "w1240">
< a href = "{url}" target = "_blank" title = "{title}">< img src = "{pic}" alt = "{title}" width = "{picwidth}" height = "{picheight}">< / a>
< / div>
< / li>
[ /index ]
[index = 3 ]
< li style = "background:#0f51b2;display:none;">
< div class = "w1240s">
< a href = "{url}" target = "_blank" title = "{title}">< img src = "{pic}" alt = "{title}" width = "{picwidth}" height = "{picheight}">< / a>
< / div>
< / li>
[ /index ]
[index = 4 ]
< li style = "background:#14a094;display:none;">
< div class = "w1240s">
< a href = "{url}" target = "_blank" title = "{title}">< img src = "{pic}" alt = "{title}" width = "{picwidth}" height = "{picheight}">< / a>
< / div>
< / li>
[ /index ]
[index = 5 ]
< li style = "background:url(http://www.banban.so/new/8.jpg) no-repeat center;display:none;">
< div class = "w1240s">
< a href = "{url}" target = "_blank" title = "{title}">< img src = "{pic}" alt = "{title}" width = "{picwidth}" height = "{picheight}">< / a>
< / div>
< / li>
[ /index ]
< / ul>
< div class = "w1240s focus-btn">
< a href = "javascript:void(0)" class = "left-btn">< / a>
< a href = "javascript:void(0)" class = "right-btn">< / a>
< / div>
< / div>
< / div>
5、将以下的CSS文件放到extend_common.css最下方
.i-focus { height:470px;position:relative;margin-top:-4px }
.i-focus .if-inner { height:470px;overflow:hidden;position:relative }
.i-focus .if-inner .left-btn,.i-focus .if-inner .right-btn {position:absolute;display:block; width:58px; height:81px;top:194px;z-index: 3;overflow:hidden;display:none }
.i-focus .if-inner .left-btn {left:10px; background:url (arrow.png ) no-repeat }
.i-focus .if-inner .left-btn:hover {background-position:-118px 0 }
.i-focus .if-inner .right-btn {right:10px; background:url (http: //www.banban.so /new /css /images /arrow.png ) no-repeat -59px 0 }
.i-focus .if-inner .right-btn:hover {background-position:-177px 0 }
.i-focus .focus-btn {position:relative }
.i-focus li { height:470px; width: 100%;overflow:hidden;zoom: 1;position:absolute }
.i-focus .focus-dot {position:absolute;top:445px;overflow:hidden;zoom: 1;z-index: 5 }
.i-focus .focus-dot a {display:block; width:9px; height:9px; border:1px solid #fff; border-radius:5px; float:left;display:inline;margin: 0 5px;overflow:hidden }
.i-focus .focus-dot .on { background:#fff }
.w1240 { width:1240px; text- align:center; margin: 0 auto }
.w1240s { width: 1240px; margin: 0 auto; }
.btnss {display:block; width:112px; height:40px;background- color:#148cbe;line- height:40px;text- align:center;font- size:15px; color:white;font-weight:normal; border:none; float:left; cursor:pointer; border-radius:5px; }
.btnss:hover {background- color:#2ca1d1; }
.btnsss {display:block; width:112px; height:40px;background- color:#ef6b00;line- height:40px;text- align:center;font- size:15px; color:#fff!important;font-weight:normal; border:none; float:left; cursor:pointer; border-radius:5px; }
.btnsss:hover {background- color:#ee7513; }
好了关于论坛的这篇文章就说到这里希望可以帮助大家。有问题可以联系解决。声明，本站内容来源于互联网如果侵犯了你的权益请联系本站删除。DZ实现第一篇数据不同样式
DZ实现第一篇数据不同样式效果如下图：
