Discuz各類幻燈片的制作方法 - 完全支持DIY

大師兄

幻燈片不僅可以展示圖片的完美效果，吸引視覺感，而且可以展示更多的信息，留住用戶。通常的方法是使用JQ等代碼來做，但容易導(dǎo)致JQ和默認(rèn)的JS沖突(jQuery和discuz js文件沖突解決辦法)，今天在道勤網(wǎng)分享使用discuz默認(rèn)的DIY來實(shí)現(xiàn)調(diào)用幻燈片，以及各種不同的效果如何制作幻燈片。

一、幻燈片的制作流程：

1、制作幻燈片DIY模塊：后臺(tái)--》門戶--》模塊模板，點(diǎn)擊 添加按扭，如下圖所示：

此處可以可以選擇不同的模塊分類，如：附件類、帖子類、文章類、圖片類等等，可以根據(jù)你的需要選擇不同的模塊分類。

下面我們以文章類為例來講解，選擇文章分類，點(diǎn)提交，如下圖所示。為新建的模塊起個(gè)名字 如 “百變幻燈片” ，把代碼框里面的內(nèi)容全部刪除 。

1.1、我們輸入代碼 ，首先在代碼框里面輸入：

1. <div class="slidebox"></div>

復(fù)制代碼

其中的div可以是任意標(biāo)簽，如table，span等，我們這里以div為例。此處的標(biāo)簽必須加一個(gè)class="slidebox"的屬性，如下面代碼所示 ，只有包含在有class="slidebox"屬性的標(biāo)簽里面的內(nèi)容才是幻燈片 ，切記。如下圖所示：

1.2、我們?cè)黾踊脽舸�碼，下面代碼用來實(shí)現(xiàn)圖片（或內(nèi)容）的顯示作用，屬性必須為class="slideshow"的標(biāo)簽。

1. <div class="slideshow"></div>

復(fù)制代碼

上面的代碼必須放在 class="slidebox"的屬性的標(biāo)簽里面，上面已經(jīng)講過 ，完整代碼如下

1. <div class="slidebox">
   
2. 
   
3. <div class="slideshow"></div>
   
4. 
   
5. </div>

復(fù)制代碼

1.3、我們來增加“滑動(dòng)”、“點(diǎn)擊”的代碼

1. <div class="slidebar"></div>

復(fù)制代碼

上面的代碼必須放在 class="slidebox"的屬性的標(biāo)簽里面，上面已經(jīng)講過 ，完整代碼如下：

1. <div class="slidebox"><!--幻燈片開始-->
   
2. 
   
3. <div class="slideshow"> </div><!--圖片展示-->
   
4. 
   
5. <div class="slidebar"> </div><!--幻燈片控制展示-->
   
6. 
   
7. </div><!--幻燈片結(jié)束-->

復(fù)制代碼

以上代碼已完成幻燈片的框架，接下來我們?yōu)榛脽羝�添加�?shù)據(jù)代碼 ，在<div class="slideshow"> </div> 代碼中間插入圖片顯示代碼，如下代碼：

1. <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--圖片展示-->

復(fù)制代碼

其中{pic} 為圖片地址變量， {picwidth}為圖片寬度變量，{picheight}為圖片高度變量

1.4、為圖片增加循環(huán)代碼，如下代碼：

1. [loop]
   
2. <img src="{pic}" width="{picwidth}" height="{picheight}" />
   
3. [/loop]

復(fù)制代碼

完整代碼如下：

1. <div class="slidebox"><!--幻燈片開始-->
   
2. <div class="slideshow">
   
3. [loop]
   
4. <img src="{pic}" width="{picwidth}" height="{picheight}" />
   
5. [/loop]
   
6. </div>
   
7. <!--圖片展示-->
   
8. <div class="slidebar"> </div><!--幻燈片控制展示-->
   
9. </div><!--幻燈片結(jié)束-->

復(fù)制代碼

1.5、為滑動(dòng)條增加數(shù)字

在<div class="slidebar"> </div>中增加婁字變量，如下代碼：

1. <div class="slidebar">
   
2. [loop1]<span>{currentorder}</span>[/loop1]
   
3. </div>

復(fù)制代碼

其中{currentorder} 是當(dāng)前顯示的順序數(shù)字  ,其中[loop1]...[/loop1] 為循環(huán)，你可能注意到了，這里用了[loop1]，如果一個(gè)模塊中需要多次循環(huán)時(shí)就可以使用 loop1、loop2、loop3 以此類推來實(shí)現(xiàn)多處循環(huán)的目的 。

1.6、增加腳本代碼， 以下代碼放在模塊代碼的最后：

1. <script type="text/javascript">
   
2. runslideshow();
   
3. </script>

復(fù)制代碼

此時(shí)一個(gè)簡單的幻燈片模塊就完成了 ，幻燈片DIY模塊的完整代碼如下：

1. <div class="slidebox"><!--幻燈片開始-->
   
2. <div class="slideshow">
   
3. [loop]
   
4. <img src="{pic}" width="{picwidth}" height="{picheight}" />
   
5. [/loop]
   
6. </div>
   
7. <!--圖片展示-->
   
8. <div class="slidebar">
   
9. [loop1]<span>{currentorder}</span>[/loop1]
   
10. </div><!--幻燈片控制展示-->
    
11. </div><!--幻燈片結(jié)束-->
    
12. 
    
13. <script type="text/javascript">
    
14. runslideshow();
    
15. </script>

復(fù)制代碼

代碼如下圖所示：

2、此時(shí)我們就可以通過前臺(tái)DIY調(diào)用做好的幻燈片模塊了 ，如下圖調(diào)用所示：

3、顯示效果如下圖所示：

至此簡易幻燈片就完成了，需要你通過CSS樣式來配合美化一下。

二、下面講解一些高級(jí)參數(shù)

1、滑動(dòng)條如何控制讓用戶點(diǎn)擊還是滑動(dòng)

在<div class="slidebar"> 中加入?yún)��?shù)，（鼠標(biāo)滑動(dòng)）mevent="mouhtml" target="_blank" class="relatedlink">seover"  或   （鼠標(biāo)點(diǎn)擊）mevent="click"，完整代碼如下，以下代碼實(shí)現(xiàn)點(diǎn)擊后變換：

1. <div class="slidebar" mevent="click">
   
2. [loop1]<span>{currentorder}</span>[/loop1]
   
3. </div>

復(fù)制代碼

2、如何實(shí)現(xiàn)上一個(gè)、下一個(gè)的效果，如下圖樣式：

添加如下代碼即可實(shí)現(xiàn)：

1. <div class="slidebarup">
   
2. <span>up</span>
   
3. </div>
   
4. 
   
5. <div class="slidebardown">
   
6. <span>down</span>
   
7. </div>

復(fù)制代碼

標(biāo)簽為 class="slidebarup" 的為上一個(gè)    標(biāo)簽為  class="slidebardown"  的為下一個(gè)。

3、當(dāng) slideshow的內(nèi)容展示不全或不在一個(gè)區(qū)域時(shí)，我們提供了更多內(nèi)容的展示方法，在需要展示的地方增加如下代碼：

1. <div class="slideother">
   
2.         <span>可以是任何內(nèi)容</span>
   
3. </div>

復(fù)制代碼

同時(shí)支持多個(gè)slideother，如下代碼：

1. <div class="slideother">
   
2.         <span>內(nèi)容一</span>
   
3. </div>
   
4. 
   
5. <div class="slideother">
   
6.         <span>內(nèi)容二</span>
   
7. </div>
   

復(fù)制代碼

4、如何控制幻燈片播放速度

在<div class="slidebox" >增加參數(shù)，，其中 timestep="3000"  為毫秒，如下代碼：

1. <div class="slidebox" timestep="3000">

復(fù)制代碼

5、如何實(shí)現(xiàn) 一次顯示多個(gè)圖片，每次切換多個(gè)，如下圖樣式：

在<div class="slidebox" >增加參數(shù)，如下代碼：

1. <div class="slidebox"  slidenum="3" slidestep="1">

復(fù)制代碼

其中  slidenum="3"  表示顯示數(shù)量  ， slidestep="1" 表示每點(diǎn)擊一次左右按扭，移動(dòng)的次數(shù)。

以上為幻燈片的所有功能，你可以根據(jù)需要組合不同的需求，再配合CSS做出各類幻燈片效果。

三、下面提供演示站點(diǎn)中門戶及頻道所用到的幻燈片代碼 （大家可以參照所提供的代碼制作出炫麗的幻燈片）

以下所示效果都需要CSS配合

1、效果一：

DIY模塊實(shí)現(xiàn)代碼

1. <div class="slidebox">
   
2. <div class="slideshow">
   
3.                         [loop]
   
4.                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
   
5.                         [/loop]
   
6. </div>
   
7.                 <div class="bignews_btns">
   
8.                     <div class="btns slidebar">
   
9.                                      [loop1]
   
10.                         <em></em>
    
11.                                                 [/loop1]
    
12.                           </div>
    
13.                     <div class="desc slideother">
    
14. [loop2]
    
15.                     <a href="{url}"{target}>{title}</a>
    
16. [/loop2]
    
17. </div>
    
18.                       </div>
    
19. </div>
    
20. <script type="text/javascript">
    
21. runslideshow();
    
22. </script>

復(fù)制代碼

2、效果二

DIY模塊實(shí)現(xiàn)代碼

1. <div class="slidebox" timestep="3000">
   
2.                   <div class="thumb on slideshow" >
   
3.                         [loop]
   
4.                <span>
   
5.                             <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
   
6.                 <p><a href="{url}"{target}>查看</a></p>
   
7.                                 </span>
   
8.                         [/loop]
   
9.             </div>
   
10.             <div class="product_desc">
    
11.                     <div class="on slideother" >
    
12.                                 [loop1]
    
13.                                 <span>
    
14.                    <h2 class="title"><a href="{url}"{target}>{title}</a></h2>
    
15.                     <p>{summary}</p>
    
16.                                         </span>
    
17.                                 [/loop1]        
    
18.                        </div>
    
19.                 <div class="product_price on slideother" >
    
20.                                 [loop2]
    
21.                    <span>{dateline}</span>
    
22.                                    [/loop2]
    
23.                 </div>
    
24.                 <div class="btns slidebar">
    
25.                     [loop3]<em>{currentorder}</em>[/loop3]
    
26.                 </div>
    
27.             </div>
    
28.           </div>
    
29. <script type="text/javascript">
    
30. runslideshow();
    
31. </script>

復(fù)制代碼

3、效果三

DIY模塊實(shí)現(xiàn)代碼

1. <div class="slidebox" slidenum="3" slidestep="1" >
   
2. <div class="leftbtn slidebarup"><a href="javascript:void(0);" mevent="click" ><img src="template/default/portal/index/images/commend_bg_2_leftbtn.gif" /></a></div>
   
3.                         <div class="middle cl" >
   
4.                         <ul class="slideshow">
   
5. [loop]<li><a href="{url}"{target}><img src="{avatar_big}" width="{picwidth}" height="{picheight}" /></a><p><a href="{url}"{target}>{title}</a></p></li>[/loop]
   
6.                     </ul>
   
7.                 </div>
   
8.                 <div class="rightbtn slidebardown "><a href="javascript:void(0);" mevent="click"><img src="template/default/portal/index/images/commend_bg_2_rightbtn.gif" /></a></div>
   
9. </div>
   
10. <script type="text/javascript">
    
11. runslideshow();
    
12. </script>
    

復(fù)制代碼

4、效果四

DIY模塊實(shí)現(xiàn)代碼

1. <div class="photobox cl slidebox" timestep="3000">
   
2.                 <div class="z leftbtn">
   
3.                     <span>美食大賞</span>
   
4.                                 <div class="slidebar">
   
5. [loop]
   
6.                 <em></em>
   
7. [/loop]
   
8.                                 </div>
   
9.             </div>
   
10.             <div class="y rightpic">
    
11.                     <div class="slideshow">
    
12. [loop1]
    
13.                                 <div>
    
14.                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
    
15.                     <p><a href="{url}"{target}>{title}</a></p>
    
16.                                 </div>
    
17. [/loop1]
    
18.         </div>
    
19.             </div>
    
20.         </div>
    
21. <script type="text/javascript">
    
22. runslideshow();
    
23. </script>

復(fù)制代碼

5、效果五

DIY模塊實(shí)現(xiàn)代碼

1. <div class="z slidebox">
   
2.                 <div class="box slideshow">
   
3.                         [loop]
   
4.                 <div>
   
5.                 <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"  /></a>
   
6.             </div>
   
7.                         [/loop]
   
8.         </div>
   
9.         <div class="box_btn cl slidebar">
   
10.                         [loop1]
    
11.                 <div>
    
12.                     <span>{title}</span>
    
13.             </div>
    
14.             [/loop1]
    
15.         </div>
    
16.         <div class="box_desc slideother">
    
17.                         [loop2]
    
18.                 <p>
    
19.                    <a href="{url}"{target}>{summary}</a></p>
    
20.                         [/loop2]
    
21.         </div>
    
22.         </div>
    
23. <script type="text/javascript">
    
24. runslideshow();
    
25. </script>

復(fù)制代碼

6、效果六

1. <div class="bignews slidebox " >
   
2. <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
   
3.                 <div class="btns slidebar">
   
4. [loop1]
   
5.                     <em>{currentorder}</em>
   
6. [/loop1]
   
7.               </div>
   
8.           </div>
   
9. <script type="text/javascript">
   
10. runslideshow();
    
11. </script>

復(fù)制代碼

7、效果七

DIY模塊實(shí)現(xiàn)代碼

1. <div class="slidebox ">
   
2.         <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
   
3.         <dd class="slidebar">
   
4. [loop1]
   
5.                 <em><a href="#"><img src="template/default/portal/food/images/num/0{currentorder}.gif" /></a></em>
   
6. [/loop1]
   
7.         </dd>
   
8.         <div class="slideother">
   
9. [loop2]
   
10.                 <div><div class="title">
    
11.                 <a href="{url}"{target}>{title}</a>
    
12.                 </div>
    
13.                 <p>
    
14.                         {summary}
    
15.                 </p></div>
    
16. [/loop2]
    
17.         </div>
    
18. </div>
    
19. <script type="text/javascript">
    
20. runslideshow();
    
21. </script>

復(fù)制代碼

8、效果八

DIY模塊實(shí)現(xiàn)代碼

1. <div class="bignews slidebox">
   
2.                     <div class="picbox slideshow">
   
3.                         [loop]<div><img src="{pic}" width="{picwidth}" height="{picheight}" /></div>[/loop]
   
4.                 </div>
   
5.                 <div class="bignews_btn slidebar" mevent="mouseover" >
   
6.                         [loop1]
   
7.                                         <div >
   
8.                             <p>
   
9.                                 <strong><a href="{url}"{target}>{title}</a></strong>
   
10.                             <em>{summary}</em>
    
11.                            </p>
    
12.                         <img src="{pic}" width="60" height="66"  />
    
13.                           </div>
    
14.                                         [/loop1]
    
15.                 </div>
    
16.             </div>
    
17. <script type="text/javascript">
    
18. runslideshow();
    
19. </script>

復(fù)制代碼

9、效果九

DIY模塊實(shí)現(xiàn)代碼

1. <div class="slidebox">
   
2. 
   
3. <div class="slideshow">
   
4.                         [loop]
   
5.                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
   
6.                         [/loop]
   
7. </div>
   
8.             <div class="btn">
   
9.                 <em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em>
   
10.                <em class="slidebar">[loop1]<span><img src="template/default/portal/car/images/empty_img.gif" width="8" height="8"/></span>[/loop1]</em>
    
11.                 <em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em>
    
12.             </div>
    
13.             <div class="bignews_title slideother">
    
14.                         [loop2]
    
15.                  <em><a href="{url}"{target}>{title}</a></em>
    
16.                         [/loop2]
    
17.             </div>
    
18. </div>
    
19. <script type="text/javascript">
    
20. runslideshow();
    
21. </script>

復(fù)制代碼

10、效果十

DIY模塊實(shí)現(xiàn)代碼

1. <div class="slidebox">
   
2. <div class="bignews">
   
3.                 <div class="slideshow">
   
4.                         [loop]
   
5.                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
   
6.                         [/loop]
   
7.             </div>
   
8.         </div>
   
9.         <div class="bignewsdesc">
   
10.                 <div class="bignewsbtn">
    
11.                     <em class="slidebarup"><img src="template/default/portal/home/images/bignews_left.gif" /></em>
    
12.                                 <span class="slidebar">
    
13.                                         [loop1]
    
14.                                         <em>{currentorder}</em>
    
15.                                         [/loop1]
    
16.                                 </span>
    
17.                     <em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em>
    
18.             </div>
    
19.               <div class="slideother">
    
20.                         [loop2]
    
21.             <dd >
    
22.                 <h2><a href="{url}"{target}>{title}</a></h2>
    
23.                 <p><a href="{url}"{target}>{summary}</a></p>
    
24.                         </dd>
    
25.                         [/loop2]
    
26.                </div>
    
27.         </div>
    
28. </div>
    
29. <script type="text/javascript">
    
30. runslideshow();
    
31. </script>
    

復(fù)制代碼

大家可以參照上面提供的十套代碼，仔細(xì)研究一下，百變幻燈 隨你而變。

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！