【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】

標(biāo)題: Discuz各類幻燈片的制作方法 - 完全支持DIY [打印本頁]
作者: 大師兄    時(shí)間: 2017-12-16 11:24
標(biāo)題: 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)擊 添加按扭，如下圖所示：
(, 下載次數(shù): 19)
此處可以可以選擇不同的模塊分類，如：附件類、帖子類、文章類、圖片類等等，可以根據(jù)你的需要選擇不同的模塊分類。

下面我們以文章類為例來講解，選擇文章分類，點(diǎn)提交，如下圖所示。為新建的模塊起個(gè)名字 如 “百變幻燈片” ，把代碼框里面的內(nèi)容全部刪除 。
(, 下載次數(shù): 16)
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)容才是幻燈片 ，切記。如下圖所示：
(, 下載次數(shù): 18)
1.2、我們增加幻燈代碼，下面代碼用來實(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">

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

  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"><!--幻燈片開始-->

  3. <div class="slideshow"> </div><!--圖片展示-->

  5. <div class="slidebar"> </div><!--幻燈片控制展示-->

  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é)束-->

  13. <script type="text/javascript">
  14. runslideshow();
  15. </script>
復(fù)制代碼
代碼如下圖所示：
(, 下載次數(shù): 22)
2、此時(shí)我們就可以通過前臺(tái)DIY調(diào)用做好的幻燈片模塊了 ，如下圖調(diào)用所示：
(, 下載次數(shù): 24)
3、顯示效果如下圖所示：
(, 下載次數(shù): 15)
至此簡易幻燈片就完成了，需要你通過CSS樣式來配合美化一下。

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

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

在<div class="slidebar"> 中加入?yún)?shù)，（鼠標(biāo)滑動(dòng)）mevent="mouseover"  或   （鼠標(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ù): 24)
添加如下代碼即可實(shí)現(xiàn)：
  1. <div class="slidebarup">
  2. <span>up</span>
  3. </div>

  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>

  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è)，如下圖樣式：
(, 下載次數(shù): 23)
在<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、效果一：
(, 下載次數(shù): 20)
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、效果二
(, 下載次數(shù): 23)
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、效果三
(, 下載次數(shù): 16)
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、效果四
(, 下載次數(shù): 23)
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、效果五
(, 下載次數(shù): 18)
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、效果六
(, 下載次數(shù): 20)
  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、效果七
(, 下載次數(shù): 22)
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、效果八
(, 下載次數(shù): 16)
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、效果九
(, 下載次數(shù): 25)
DIY模塊實(shí)現(xiàn)代碼
  1. <div class="slidebox">

  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、效果十
(, 下載次數(shù): 17)
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ì)研究一下，百變幻燈 隨你而變。




歡迎光臨 【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】 (http://bmrsportswear.com/) Powered by Discuz! X3.4