DISCUZ论坛做网站轮播图方法

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

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

方法/步骤

1、下载js文件，解压放在images文件下：
" E+ K1 S) S/ s/ y. U. E1 |( [ js.rar (34.56 KB, 下载次数: 0)

2021-3-11 09:58 上传

点击文件名下载附件

% [1 M0 ^. B, B  K( F) A% I5 [1 s2、在需要显示换灯片的位置,删除原有的代码，放入DIY代码：

1. <div class="i-focus" id="iFocus">
   8 A" D3 m5 [$ |, c1 G) j
2. <!--[diy=diyflash9]--><div id="diyflash9" class="area"></div><!--[/diy]-->
   
3. </div>

复制代码

3、在调用底部文件的代码上方放上以下的JS代码来调用JS文件

1. <!--{if $_GET['diy'] != 'yes' }-->
   / s  J& }7 J. }# A
2. <script src="template/awx/images/js/jquery1.8.3.js" type="text/javascript"></script>
   , j" x9 |2 G; J
3. <script src="template/awx/images/js/focusfade.js" type="text/javascript"></script>
   
4. <script src="template/awx/images/js/index.js" type="text/javascript"></script>
   2 o, j9 h' L5 W/ `! d$ c- Z
5. <!--{/if}-->

复制代码

4、在DIY中放入以下的代码【可以根据自己需要设置数量】

1. <div class="focus-pic">
   ) {/ k' T( o) }( ~6 Q9 a
2. <div class="if-inner">
   
3. <ul>
   8 `7 u: [" D) |" ?: e4 _/ D% T
4. [index=1]
   
5. <li style="background:url(http://www.banban.so/new/20150912.jpg) no-repeat center;">
   
6. <div class="w1240">
   
7. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
   8 w# o6 q( C6 A: a0 J2 L2 |4 O
8. </div>
   2 R  Z. Y3 ^9 [- J3 A
9. </li>
   , U# B4 W# c8 M+ p+ }" ?5 w* Y
10. [/index]
    
11. [index=2]
    
12. <li style="background:#f03540; display:none;">
    $ k1 \. W6 ^: |! [) ~
13. <div class="w1240">
    
14. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    
15. </div>
    & y7 E5 q  F- h( x7 a
16. </li>
    5 a0 E1 u) u9 ?8 R8 w+ m
17. [/index]
    9 @. v# C- w7 N1 U, I
18. [index=3]
    
19. <li style="background:#0f51b2;display:none;">
    7 G4 w6 ~7 E( t; V+ @
20. <div class="w1240s">
    
21. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    
22. </div>
    2 E% l: P( _  L+ s
23. </li>
    
24. [/index]
    
25. [index=4]
    1 Y$ j5 d# m. o, d9 Q( B# U
26. <li style="background:#14a094;display:none;">
    " c3 M3 s9 X; b- k- d
27. <div class="w1240s">
    ; W1 t# x( c0 r" I, L, @
28. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    # ~2 T" ^0 u8 M* e, z
29. </div>
    
30. </li>
    
31. [/index]
    
32. [index=5]
    
33. <li style="background:url(http://www.banban.so/new/8.jpg) no-repeat center;display:none;">
    
34. <div class="w1240s">
    
35. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    
36. </div>
    ( M8 c0 W5 e9 c
37. </li>
    
38. [/index]
    2 I- m2 A5 c! J, U
39. </ul>
    ; j/ q$ h- K% U
40. <div class="w1240s focus-btn">
    
41. <a href="javascript:void(0)" class="left-btn"></a>
    
42. <a href="javascript:void(0)" class="right-btn"></a>
    4 `$ X9 b3 x4 N8 A
43. </div>
    
44. </div>
    
45. </div>

复制代码

5、将以下的CSS文件放到extend_common.css特别下方

1. .i-focus{height:470px;position:relative;margin-top:-4px}
   2 w( n& w6 x- ^
2. .i-focus .if-inner{height:470px;overflow:hidden;position:relative}
   : t# A0 C- K9 |8 E+ S, @) l* I! l
3. .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}
   
4. .i-focus .if-inner .left-btn{left:10px;background:url(arrow.png) no-repeat}
   * t. q$ f! q6 |2 Z" j
5. .i-focus .if-inner .left-btn:hover{background-position:-118px 0}
   # [! n3 `6 E  y; F- R9 H; p
6. .i-focus .if-inner .right-btn{right:10px;background:url(http://www.banban.so/new/css/images/arrow.png) no-repeat -59px 0}
   
7. .i-focus .if-inner .right-btn:hover{background-position:-177px 0}
   - m5 v3 T1 }. N
8. .i-focus .focus-btn{position:relative}
   
9. .i-focus li{height:470px;width:100%;overflow:hidden;zoom:1;position:absolute}
   
10. .i-focus .focus-dot{position:absolute;top:445px;overflow:hidden;zoom:1;z-index:5}
    
11. .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}
    / v- [7 p7 [! V8 W4 r
12. .i-focus .focus-dot .on{background:#fff}
    
13. .w1240{width:1240px; text-align:center; margin:0 auto}
    # k$ _# _. i6 ~6 P) L
14. .w1240s {width: 1240px; margin: 0 auto;}
    " o& O. C5 P+ m- i! K# t' g4 f
15. .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;}
    ! t$ D" C: [5 r) y; n7 v7 P- S
16. .btnss:hover{background-color:#2ca1d1;}
    / z4 ]) I( r1 }& j9 |4 Q+ L. T9 ^
17. .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;}
    
18. .btnsss:hover{background-color:#ee7513;}

复制代码

% v- {3 x5 x* A0 e! R7 L* s. ^

--声明--

1、会员在访问网站并且下载文档提示缺少学费请每天签到或者分享资源即可拥有学费。

2、付出是相互的，请不要想不劳而获的好事能在你身边发生，社会是公平的。

3、转载或引用本网站内容须注明原网址，并标明本网站网址(http://www.aurrel.com)。

4、转载或引用本网站中的署名文章，请按规定向原作者支付稿酬。

5、网站发布的部分源码或者教程仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件（215586711@qq.com）与我们联系处理。

本文地址: https://www.aurrel.com/thread-17100-1-1.html