零基础学做网站培训介绍

当前位置:

DISCUZ论坛做网站轮播图方法

DISCUZ论坛里经常会有轮播图,我们自己在制作论坛时,也可以自己做轮播图。如下图:

DISCUZ轮播图

下面学做网站论坛介绍一下DISCUZ论坛网站轮播图制作方法。

方法/步骤

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;}

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 我们做了一个论坛网站,如果discuz论坛更换域名的方法又是如何呢,更换域名需要注意那些问题,才会对网站发展更有利呢?下面先说更换域名的步
  • template/default/common 模板公共文件夹,全局相关|--block_forumtree.htm 树形论坛版块分支js文件|--block_thread.htm 特殊主题的风格模块文
  • 培训对象:想学习建站技术,希望在网络上有所发展的学员培训主体: 学做网站论坛 [实体资质查看]培训费用:680元 = 建站课程     980元 = 建
  • 各位论坛学员们:论坛从即日起,学做网站论坛开通SEO优化培训课,将有论坛讲师讲解最新的网站优化排名方法。希望学习网站SEO课程的学员,赶快报名吧……
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想