在 DIY 時如何調用幻燈片，幻燈片該如何製作，這一講我們來教大家如何製作幻燈片

請跟隨教程從頭到尾仔細閲讀，你將收穫不小

第一步製作幻燈片：後台--》 門户--》 模塊模板

點擊 添加按扭 如下圖所示

1.gif

2010-9-25 10:48 上傳

下載附件 (12.23 KB)

此處可以可以選擇不同的模塊分類如 附件類、帖子類、文章類、圖片類等等 可以根據你的喜好選擇不同的模塊分類

下面我們以文章類為例來講解，選擇文章分類 點提交 如下圖所示 ，為新建的模塊起個名字 如 「百變幻燈片」  

把代碼框裏面的內容全部刪除

2.gif

2010-9-25 10:56 上傳

下載附件 (27.19 KB)

接下來 我們輸入代碼

首先在代碼框裏面輸入

  1. <div ></div>

其中的 div 可以是任意標籤，如 table，span 等，我們這裏以 div 為例

此處的標籤必須加一個的屬性 如下面代碼所示 ，只有包含在有屬性的標籤裏面的內容才是幻燈片 ，切記
如下圖所示

3.gif

2010-9-25 11:07 上傳

下載附件 (13.58 KB)

接下來，我們增加幻燈代碼   下面代碼用來實現圖片 （或內容） 的顯示作用 屬性必須為的標籤

  1. <div ></div>

上面的代碼必須放在 的屬性的標籤裏面 上面已經講過 ，完整代碼如下

  1. <div >
  3. <div ></div>
  5. </div>

接下來我們來增加 「滑動」 、 「點擊」 的代碼   

  1. <div ></div>

上面的代碼必須放在 的屬性的標籤裏面 上面已經講過 ，完整代碼如下

  1. <div ><!--幻燈片開始-->
  3. <div > </div><!--圖片展示-->
  5. <div > </div><!--幻燈片控制展示-->
  7. </div><!--幻燈片結束-->

以上代碼已完成幻燈片的框架 接下來我們為幻燈片添加數據代碼

在<div > </div> 代碼中間插入圖片顯示代碼

如下代碼

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

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

接下來為圖片增加循環代碼 如下代碼

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

完整代碼如下

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

接下來 為滑動條增加數字

在<div > </div> 中增加婁字變量 如下代碼

  1. <div >
  2. [loop1]<span>{currentorder}</span>[/loop1]
  3. </div>

其中 {currentorder} 是當前顯示的順序數字  , 其中 [loop1]...[/loop1] 為循環，你可能注意到了，這裏用了 [loop1] , 如果一個模塊中需要多次循環時就可以使用 loop1 、 loop2 、 loop3 以此類推 來實現多處循環的目的

最後增加腳本代碼 如下   以下代碼放在模塊代碼的最後

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

此時一個簡單的幻燈片就完成了 ，幻燈片的完整代碼 如下

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

如下圖所示

5.gif

2010-9-25 12:01 上傳

下載附件 (16.18 KB)