漫潮者,私有云,NAS,新媒体电商.软件开发,商乾

标题: DISCUZ论坛做网站轮播图方法 [打印本页]

---

作者: 北极孤星的泪    时间: 2021-3-11 09:59
标题: DISCUZ论坛做网站轮播图方法

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

(, 下载次数: 11)

上传

点击文件名下载附件

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

方法/步骤

1、下载js文件，解压放在images文件下：
- K0 q& K* l7 V# p (, 下载次数: 0)

上传

点击文件名下载附件

2、在需要显示换灯片的位置,删除原有的代码，放入DIY代码：

1. <div class="i-focus" id="iFocus">
   
2. <!--[diy=diyflash9]--><div id="diyflash9" class="area"></div><!--[/diy]-->
     m! M8 F- a; U1 {3 N' k
3. </div>

复制代码

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

1. <!--{if $_GET['diy'] != 'yes' }-->
   8 S# _1 E# c9 w) A% U
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>
   & i" F9 [# K" p- N! K+ Y
4. <script src="template/awx/images/js/index.js" type="text/javascript"></script>
   
5. <!--{/if}-->

复制代码

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

1. <div class="focus-pic">
   
2. <div class="if-inner">
   : K9 h8 Q, \: @- G) X
3. <ul>
   6 r' h/ x* w; v1 {2 r
4. [index=1]
   9 H8 m* I0 z- ~7 k5 f. i3 n
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. </div>
   4 p5 u! m3 |2 ?  [
9. </li>
   
10. [/index]
    ! ]% {& y/ h4 c8 m: V2 a) d( R. b
11. [index=2]
    ! H" [* _" n' ~4 L' P% p3 Y3 }1 L
12. <li style="background:#f03540; display:none;">
    
13. <div class="w1240">
    
14. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    
15. </div>
    ) m: x9 {0 \; ]# @, }
16. </li>
    
17. [/index]
    
18. [index=3]
    
19. <li style="background:#0f51b2;display:none;">
    6 G5 o: k9 g0 ^
20. <div class="w1240s">
    
21. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    ) r9 A7 _1 V( k
22. </div>
    
23. </li>
    ! s8 X- o" N9 i( Q7 k$ |0 [9 F) m% d. j
24. [/index]
    . V, W- B0 Z3 f  S  b
25. [index=4]
    ) O7 o; F0 o1 K( _. ]7 e( A
26. <li style="background:#14a094;display:none;">
    ( S3 A9 U& A) ], `0 T
27. <div class="w1240s">
    ; h' ], v2 a: o
28. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    0 J' D1 t# `. G" u  S6 i8 W# @& o
29. </div>
    " b, L5 o* F4 V, Q9 u
30. </li>
    
31. [/index]
    7 l% m2 E+ [8 t
32. [index=5]
    
33. <li style="background:url(http://www.banban.so/new/8.jpg) no-repeat center;display:none;">
    8 r( n* H+ p% d* Y
34. <div class="w1240s">
    
35. <a href="{url}" target="_blank" title="{title}"><img src="{pic}" alt="{title}" width="{picwidth}" height="{picheight}"></a>
    
36. </div>
    
37. </li>
    + H" D1 B- }7 C4 R
38. [/index]
    ; |0 p, I3 d: E3 H+ i9 o8 \% b2 }
39. </ul>
    
40. <div class="w1240s focus-btn">
    
41. <a href="javascript:void(0)" class="left-btn"></a>
    ; ?2 {( L, i( G
42. <a href="javascript:void(0)" class="right-btn"></a>
    
43. </div>
    
44. </div>
    
45. </div>

复制代码

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

1. .i-focus{height:470px;position:relative;margin-top:-4px}
   # c2 M' u* r4 G  W( o
2. .i-focus .if-inner{height:470px;overflow:hidden;position:relative}
   
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}
   
5. .i-focus .if-inner .left-btn:hover{background-position:-118px 0}
   ! v* g. y0 k  i$ r' 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}
   
8. .i-focus .focus-btn{position:relative}
   
9. .i-focus li{height:470px;width:100%;overflow:hidden;zoom:1;position:absolute}
   & m4 Y& \7 q! |- O
10. .i-focus .focus-dot{position:absolute;top:445px;overflow:hidden;zoom:1;z-index:5}
    . c8 I% }7 V3 ?, }) U" T
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}
    1 L% l! W' L. s& M) W* C5 p" A, r) g
13. .w1240{width:1240px; text-align:center; margin:0 auto}
    . @/ D; ?7 M/ V. U3 f( d  U
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;}
    % ?8 ~& `! M$ `2 ?
16. .btnss:hover{background-color:#2ca1d1;}
    
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;}

复制代码

---

欢迎光临 漫潮者,私有云,NAS,新媒体电商.软件开发,商乾 (https://www.aurrel.com/)

Powered by Discuz! X3.4