零基础学做网站培训介绍

当前位置:

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

发表评论

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

相关教程

  • 我们做论坛网站时,如果网站中需要替换或修改多个文章,就需要使用SQL批量操作。以前我们讲过DZ论坛批量修改已发布贴子内容,今天再来讲一下,Discuz
  • 我们在使用Discuz 程序建网站时,往往需要对已发布的内容进行批量替换。这时我们可以使用Discuz 批量替换内容的方法。Discuz 批量替换内容的SQL语句
  • 很多站长都喜欢使用Discuz做论坛网站,由于Discuz论坛后台提供了方便的SEO设置功能,可以直接在后台进行SEO优化设置。下面来介绍一下Discuz论坛后台SE
  • Discuz实现不同帖子调用不同模板,在论坛制作教程中,我们介绍了怎么制作论坛网站,在论坛网站开发过程中,如果想实现不同帖子内容页调用不同的模板,
  • Discuz后台可以进行邮件设置,实现网站自动发送邮件给用户的邮箱。在Discuz邮件设置,经常使用25端口普通发送邮件。为了数据安全,我们也可以使用SSL
  • 在一些企业或门户网站的导航栏中,经常会看到下拉菜单,这样会使用户操作方便一些。在之前的教程中,我们也讲过wordpress下拉菜单的制作方法。其实,
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着非常大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实现伪
  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • DZ论坛网站经常在网站搬家,换空间,换域名后,会出现网站ucenter后台无法登录,或者出现空白,打不开的现象。这是件很令人头痛的事情,网上也有给出
  • 很多学习DZ模板制作的学员在本地环境下制作好网站之后,将这个网站搬家到自己的网站空间上时,打开网站都是正常的。以为这样就大功告成了。但在网站后