学做网站培训课程介绍

当前位置:

DISCUZ论坛如何制作焦点轮播图

网站上有焦点幻灯片可以让整个网站动感十足,我们在学习论坛网站制作教程时,也可以自己去制作焦点幻灯片,让自己的网站上拥有自己喜欢的焦点幻灯片效果。

更多js焦点轮换图代码可以看这里:https://www.xuewangzhan.net/topic/flash/DISCUZ论坛如何制作焦点幻灯片

discuz论坛制作焦点幻灯片的步骤

  1. 在网站显示幻灯片的位置放入以下的HTML代码;
    <div id="focus001">
        <ul>
            <li><a href="/" target="_blank"><img src="/img/01.jpg" alt="jquery特效" /></a></li>
            <li><a href="/" target="_blank"><img src="/img/02.jpg" alt="DIVCSS5" /></a></li>
            <li><a href="/" target="_blank"><img src="/img/03.jpg" alt="点击左右滚动jquery焦点图特效" /></a></li>
        </ul>
    </div>
  2. 在幻灯片所在的页面的顶部的HEAD标签中放入以下的CSS样式代码,控制幻灯片的显示样式;
    /* 以下特效CSS */
    .focus {width:600px; height:280px; margin:0 auto; overflow:hidden; position:relative;}
    .focus ul {height:380px; position:absolute;}
    .focus ul li {float:left; width:600px; height:280px; overflow:hidden; position:relative; background:#000;}
    .focus ul li div {position:absolute; overflow:hidden;}
    .focus .btnBg {position:absolute; width:600px; height:20px; left:0; bottom:0; background:#000; display:none;}
    .focus .btn {position:absolute; width:680px; height:23px; padding:0px 10px 0px 10px; right:0; bottom:6px; text-align:right;}
    .focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:24px; line-height:24px; text-align:center; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
    .focus .btn span.on {background:#fff;}
    .focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;}
    .focus .pre {left:0;}
    .focus .next {right:0; background-position:right top;}
    </style>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/sl.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.focus("#focus001");
        });
    </script>
  3. 下载幻灯片的JS文件,然后解压上传到自己网站的根目录下。下载地址:https://pan.baidu.com/s/1gdKl6ld
  4. 通过FTP软件去替IMG文件夹中的图片为自己网站的图片即可。

以上是制作论坛网站幻灯片的方法,其它程序网站的方法可以参考:如何制作网站幻灯片

发表评论

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

相关教程

  • 我们做了一个论坛网站,如果discuz论坛更换域名的方法又是如何呢,更换域名需要注意那些问题,才会对网站发展更有利呢?下面先说更换域名的步
  • template/default/common 模板公共文件夹,全局相关|--block_forumtree.htm 树形论坛版块分支js文件|--block_thread.htm 特殊主题的风格模块文
  • 培训对象:想学习建站技术,希望在网络上有所发展的学员培训主体: 学做网站论坛 [实体资质查看]培训费用:680元 = 建站课程     980元 = 建
  • 各位论坛学员们:论坛从即日起,学做网站论坛开通SEO优化培训课,将有论坛讲师讲解最新的网站优化排名方法。希望学习网站SEO课程的学员,赶快报名吧……
  • 网站上有焦点幻灯片可以让整个网站动感十足,我们在学习论坛网站制作教程时,也可以自己去制作焦点幻灯片,让自己的网站上拥有自己喜欢的焦点幻灯片效
  • 今天介绍一个Jquery图片导航焦点图特效,这种特效在很多网站上都使用到,特别一些大型网站上面也会经常使用到这种Jquery图片导航焦点图特效。
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在我们仿站过程中,有点网站上带有轮播图,大多都是通过JS+FLASH的方式。这会给网站带来大量的冗余代码。如果你不喜欢,可以用一张图片来替换