DISCUZ论坛做网站轮播图方法

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

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

方法/步骤

1、下载js文件，解压放在images文件下：
! Z2 r0 s2 x2 C9 G0 K* ~. B js.rar (34.56 KB, 下载次数: 0)

2021-3-11 09:58 上传

点击文件名下载附件
( `/ P; C9 l# w. {) @2、在需要显示换灯片的位置,删除原有的代码，放入DIY代码：

1. <div class="i-focus" id="iFocus">
   
2. <!--[diy=diyflash9]--><div id="diyflash9" class="area"></div><!--[/diy]-->
   
3. </div>

复制代码

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

1. <!--{if $_GET['diy'] != 'yes' }-->
   : L; w5 V7 Z% d3 t* ?) c& K
2. <script src="template/awx/images/js/jquery1.8.3.js" type="text/javascript"></script>
   
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>
   
5. <!--{/if}-->

复制代码

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

1. <div class="focus-pic">
   - @  \: g. H. N7 @8 A" |# A" Q
2. <div class="if-inner">
   
3. <ul>
     z' e0 L8 d% B+ P
4. [index=1]
   5 S' c9 F. E9 H' b: M
5. <li style="background:url(http://www.banban.so/new/20150912.jpg) no-repeat center;">
   
6. <div class="w1240">
   / {4 \/ O5 C. z6 T8 k8 v
7. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
   
8. </div>
   
9. </li>
   $ F/ n! @5 T/ c" W' C
10. [/index]
    ; ?4 `0 T( }( V" G$ q
11. [index=2]
    ( C( @2 ?8 {& n' |' W7 k$ D
12. <li style="background:#f03540; display:none;">
    ) ]# i9 b  s0 U$ }4 A' I
13. <div class="w1240">
    
14. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    . Q+ _! B- y" w2 R# b, ~
15. </div>
    4 G( V- r8 O: d% |
16. </li>
    % t. ~0 i5 `6 F
17. [/index]
    5 @; |: c, ~% k- p8 e
18. [index=3]
    4 y+ m% y* `4 [6 ?' H! X
19. <li style="background:#0f51b2;display:none;">
    * p' J* S  K& O' H
20. <div class="w1240s">
    % c6 V! Q1 Y$ L. M1 p; ~( I
21. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    
22. </div>
    , s( Y) P) f1 A3 d9 l7 ^; ]6 g# [
23. </li>
    
24. [/index]
    
25. [index=4]
    7 k6 e' P8 h$ o+ f- [
26. <li style="background:#14a094;display:none;">
    2 f9 f8 a) j+ L$ V; ^, b+ r
27. <div class="w1240s">
    $ y1 H5 X% `9 t  H; x
28. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    3 i: ~) J; z# R, j. t. N4 [
29. </div>
    - ?! n+ ~/ |# y: _
30. </li>
    
31. [/index]
    
32. [index=5]
    
33. <li style="background:url(http://www.banban.so/new/8.jpg) no-repeat center;display:none;">
    & ]: r, y. k% w9 V+ ?* o7 P" c2 I
34. <div class="w1240s">
    
35. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    : k0 t6 G! Q4 y) k4 F0 {
36. </div>
    / J( I- _( S8 |) c  W
37. </li>
    
38. [/index]
    
39. </ul>
    7 _! `7 m5 q' g
40. <div class="w1240s focus-btn">
    
41. <a href="javascript:void(0)" class="left-btn"></a>
    # E+ I' {- [  R# \: h  {$ }+ I
42. <a href="javascript:void(0)" class="right-btn"></a>
    / }' h8 k  [5 j2 b: ^) @
43. </div>
    & ]# B- E3 J# Y( z1 K
44. </div>
    
45. </div>

复制代码

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

1. .i-focus{height:470px;position:relative;margin-top:-4px}
   
2. .i-focus .if-inner{height:470px;overflow:hidden;position:relative}
   2 g5 l! ?& H4 c6 z
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}
   6 I: F  |( B9 e6 h! S
4. .i-focus .if-inner .left-btn{left:10px;background:url(arrow.png) no-repeat}
   3 k& `/ b) ~, f3 h
5. .i-focus .if-inner .left-btn:hover{background-position:-118px 0}
   . e, v$ q6 o4 J/ b* r- A; Y
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}
   
8. .i-focus .focus-btn{position:relative}
   9 a* W4 [+ w2 N8 m8 p! g
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}
    
12. .i-focus .focus-dot .on{background:#fff}
    
13. .w1240{width:1240px; text-align:center; margin:0 auto}
    8 t# d+ p/ K6 q- ?( p
14. .w1240s {width: 1240px; margin: 0 auto;}
    
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;}
    / _+ p& j( P, j: |; X
16. .btnss:hover{background-color:#2ca1d1;}
      q9 K: k9 r0 g2 b. \
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;}

复制代码

2 _: T$ r9 ^. ~; P# M3 k% p