discuz DIY教程 百變幻燈片，完全DIY（高級教程）

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

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

第一步制作幻燈片：后臺--》門戶--》模塊模板

點擊 添加按扭 如下圖所示

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

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

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

接下來 我們輸入代碼

首先在代碼框里面輸入

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

復制代碼

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

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

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

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

復制代碼

上面的代碼必須放在 class="slidebox"的屬性的標簽里面 上面已經講過 ，完整代碼如下

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

復制代碼

接下來我們來增加“滑動”、“點擊”的代碼   

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

復制代碼

上面的代碼必須放在 class="slidebox"的屬性的標簽里面 上面已經講過 ，完整代碼如下

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

復制代碼

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

在
代碼中間插入圖片顯示代碼

如下代碼

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

復制代碼

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

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

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

復制代碼

完整代碼如下

1. <div><div class="slidebox"><!--幻燈片開始--></div><div><div class="slideshow"></div><div>[loop]</div><div><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><div>[/loop]</div><div></div></div><div><!--圖片展示--></div><div><div class="slidebar"> </div><!--幻燈片控制展示--></div><div></div><!--幻燈片結束--></div>

復制代碼

接下來 為滑動條增加數字

在
中增加婁字變量 如下代碼

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

復制代碼

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

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

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

復制代碼

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

1. <div><div class="slidebox"><!--幻燈片開始--></div><div><div class="slideshow"></div><div>[loop]</div><div><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><div>[/loop]</div><div></div></div><div><!--圖片展示--></div><div><div class="slidebar"> </div><div>[loop1]<span>{currentorder}</span>[/loop1]</div><div></div><!--幻燈片控制展示--></div><div></div><!--幻燈片結束--></div><div>
   
2. </div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div>

復制代碼

如下圖所示

此時我們就可以通過前臺DIY調用了

如下圖所示 調用

顯示效果

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

下面講解一些高級參數

1、滑動條如何控制讓用戶點擊還是滑動  
      在 中加入參數  （鼠標滑動）mevent="mouseover"  或   （鼠標點擊）mevent="click"   
      完整代碼如下  以下代碼實現 點擊后變換

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

復制代碼

2、如何實現上一個 下一個的效果 如下圖樣式

   
    添加如下代碼即可實現

1. <div><div class="slidebarup"></div><div><span>up</span></div><div></div></div><div>
   
2. </div><div><div class="slidebardown"></div><div><span>down</span></div><div></div></div>

復制代碼

標簽為 class="slidebarup" 的為上一個    標簽為  class="slidebardown"  的為下一個  

3、當 slideshow的內容展示不全或 不在一個區域時 我們提供了 更多內容的展示方法  在需要展示的地方增加如下代碼

1. <div><div class="slideother"></div><div>        <span>可以是任何內容</span></div><div></div></div>

復制代碼

同時支持多個slideother   如下代碼

1. <div><div class="slideother"></div><div>        <span>內容一</span></div><div></div></div><div>
   
2. </div><div><div class="slideother"></div><div>        <span>內容二</span></div><div></div></div><div></div>

復制代碼

4、如何控制幻燈片播放的速度
      在增加參數  如下代碼  其中 timestep="3000"  為毫秒

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

復制代碼

5、如何實現 一次顯示多個圖片，每次切換多個 如下圖樣式

   
        在增加參數  如下代碼

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

復制代碼

以上為幻燈片的所有功能

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

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

效果一

實現代碼

1. <div><div class="slidebox"></div><div><div class="slideshow"></div><div>                        [loop]</div><div>                    <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></div><div>                        [/loop]</div><div></div></div><div>                <div class="bignews_btns"></div><div>                    <div class="btns slidebar"></div><div>                                     [loop1]</div><div>                        <em></em></div><div>                                                [/loop1]</div><div>                          </div></div><div>                    <div class="desc slideother"></div><div>[loop2]</div><div>                    <a href="{url}"{target}>{title}</a></div><div>[/loop2]</div><div></div></div><div>                      </div></div><div></div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div>

復制代碼

效果二

實現代碼

1. <span style="font-size: 14px; line-height: 1.5;"><div class="slidebox" timestep="3000"></span><div>                  <div class="thumb on slideshow" ></div><div>                        [loop]</div><div>               <span></div><div>                            <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></div><div>                <p><a href="{url}"{target}>查看</a></p></div><div>                                </span></div><div>                        [/loop]</div><div>            </div></div><div>            <div class="product_desc"></div><div>                    <div class="on slideother" ></div><div>                                [loop1]</div><div>                                <span></div><div>                   <h2 class="title"><a href="{url}"{target}>{title}</a></h2></div><div>                    <p>{summary}</p></div><div>                                        </span></div><div>                                [/loop1]        </div><div>                       </div></div><div>                <div class="product_price on slideother" ></div><div>                                [loop2]</div><div>                   <span>{dateline}</span></div><div>                                   [/loop2]</div><div>                </div></div><div>                <div class="btns slidebar"></div><div>                    [loop3]<em>{currentorder}</em>[/loop3]</div><div>                </div></div><div>            </div></div><div>          </div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div>

復制代碼

效果三

實現代碼

1. <div><div class="slidebox" slidenum="3" slidestep="1" ></div><div><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></div><div>                        <div class="middle cl" ></div><div>                        <ul class="slideshow"></div><div>[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]</div><div>                    </ul></div><div>                </div></div><div>                <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></div><div></div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div><div> </div>

復制代碼

效果四

實現代碼

1. <div><div class="photobox cl slidebox" timestep="3000"></div><div>                <div class="z leftbtn"></div><div>                    <span>美食大賞</span></div><div>                                <div class="slidebar"></div><div>[loop]</div><div>                <em></em></div><div>[/loop]</div><div>                                </div></div><div>            </div></div><div>            <div class="y rightpic"></div><div>                    <div class="slideshow"></div><div>[loop1]</div><div>                                <div></div><div>                    <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></div><div>                    <p><a href="{url}"{target}>{title}</a></p></div><div>                                </div></div><div>[/loop1]</div><div>        </div></div><div>            </div></div><div>        </div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div>

復制代碼

效果五

實現代碼

1. <span style="font-size: 14px; line-height: 1.5;"><div class="z slidebox"></span><div>                <div class="box slideshow"></div><div>                        [loop]</div><div>                <div></div><div>                <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"  /></a></div><div>            </div></div><div>                        [/loop]</div><div>        </div></div><div>        <div class="box_btn cl slidebar"></div><div>                        [loop1]</div><div>                <div></div><div>                    <span>{title}</span></div><div>            </div></div><div>            [/loop1]</div><div>        </div></div><div>        <div class="box_desc slideother"></div><div>                        [loop2]</div><div>                <p></div><div>                   <a href="{url}"{target}>{summary}</a></p></div><div>                        [/loop2]</div><div>        </div></div><div>        </div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div>

復制代碼

效果六

實現代碼

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

復制代碼

效果七

實現代碼  

1. <div><div class="slidebox "> </div><div>        <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div></div><div>        <dd class="slidebar"></div><div>[loop1]</div><div>                <em><a href="#"><img src="template/default/portal/food/images/num/0{currentorder}.gif" /></a></em></div><div>[/loop1]</div><div>        </dd></div><div>        <div class="slideother"></div><div>[loop2]</div><div>                <div><div class="title"></div><div>                <a href="{url}"{target}>{title}</a></div><div>                </div></div><div>                <p></div><div>                        {summary}</div><div>                </p></div></div><div>[/loop2]</div><div>        </div></div><div></div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div>

復制代碼

效果八

實現代碼

1. <div><div class="bignews slidebox"></div><div>                    <div class="picbox slideshow"></div><div>                        [loop]<div><img src="{pic}" width="{picwidth}" height="{picheight}" /></div>[/loop]</div><div>                </div></div><div>                <div class="bignews_btn slidebar" mevent="mouseover" ></div><div>                        [loop1]</div><div>                                        <div > </div><div>                            <p></div><div>                                <strong><a href="{url}"{target}>{title}</a></strong></div><div>                            <em>{summary}</em></div><div>                           </p></div><div>                        <img src="{pic}" width="60" height="66"  /></div><div>                          </div></div><div>                                        [/loop1]</div><div>                </div></div><div>            </div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div>

復制代碼

效果九

實現代碼

1. <div><div class="slidebox"></div><div>
   
2. </div><div><div class="slideshow"></div><div>                        [loop]</div><div>                    <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></div><div>                        [/loop]</div><div></div></div><div>            <div class="btn"></div><div>                <em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em></div><div>               <em class="slidebar">[loop1]<span><img src="template/default/portal/car/images/empty_img.gif" width="8" height="8"/></span>[/loop1]</em></div><div>                <em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em></div><div>            </div></div><div>            <div class="bignews_title slideother"></div><div>                        [loop2]</div><div>                 <em><a href="{url}"{target}>{title}</a></em></div><div>                        [/loop2]</div><div>            </div></div><div></div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div>

復制代碼

效果十

實現代碼

1. <div><div class="slidebox"></div><div><div class="bignews"></div><div>                <div class="slideshow"></div><div>                        [loop]</div><div>                    <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></div><div>                        [/loop]</div><div>            </div></div><div>        </div></div><div>        <div class="bignewsdesc"></div><div>                <div class="bignewsbtn"></div><div>                    <em class="slidebarup"><img src="template/default/portal/home/images/bignews_left.gif" /></em></div><div>                                <span class="slidebar"></div><div>                                        [loop1]</div><div>                                        <em>{currentorder}</em></div><div>                                        [/loop1]</div><div>                                </span></div><div>                    <em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em></div><div>            </div></div><div>              <div class="slideother"></div><div>                        [loop2]</div><div>            <dd ></div><div>                <h2><a href="{url}"{target}>{title}</a></h2></div><div>                <p><a href="{url}"{target}>{summary}</a></p></div><div>                        </dd></div><div>                        [/loop2]</div><div>               </div></div><div>        </div></div><div></div></div><div><script type="text/javascript"></div><div>runslideshow();</div><div></script></div><div></div>

復制代碼

大家可以參照上面提供的十套代碼 仔細研究一下。

百變幻燈 隨你而變

感謝大家