DISCUZ论坛如何制作焦点幻灯片

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

更多js焦点轮换图代码可以看这里：https://www.xuewangzhan.com/topic/flash/

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文件，然后解压上传到自己网站的根目录下。下载地址：http://pan.baidu.com/s/1gdKl6ld
4. 通过FTP软件去替IMG文件夹中的图片为自己网站的图片即可。

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

标签： isp 代码 网站制作 网站制作教程 制作网站

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。