<var id="lljjd"><video id="lljjd"></video></var>
<var id="lljjd"><video id="lljjd"><listing id="lljjd"></listing></video></var><var id="lljjd"><strike id="lljjd"><listing id="lljjd"></listing></strike></var><menuitem id="lljjd"><dl id="lljjd"><listing id="lljjd"></listing></dl></menuitem> <cite id="lljjd"><strike id="lljjd"><thead id="lljjd"></thead></strike></cite>
<cite id="lljjd"><strike id="lljjd"><listing id="lljjd"></listing></strike></cite><var id="lljjd"><strike id="lljjd"><thead id="lljjd"></thead></strike></var>
<ins id="lljjd"><span id="lljjd"><var id="lljjd"></var></span></ins>
<var id="lljjd"></var>
開啟左側

[系列教程] discuz DIY教程 百變幻燈片,完全DIY(高級教程)

[復制鏈接]
2790 0
優秀 鐘振森 發表于 2015-5-15 00:12:55 | 只看該作者 |只看大圖 |閱讀模式 打印 上一主題 下一主題
在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>
復制代碼


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

百變幻燈 隨你而變

感謝大家

來源:源碼之家,歡迎分享 (QQ/微信:83122197)

上一篇:如何解決重復登錄后臺的”難題“
下一篇:關于DisuczX 2.5, 3.0, 3.1, 3.2 升級至 20141225 登錄不了解決教程
分享到:  QQ好友和群QQ好友和群 微信微信
收藏
收藏0
喜歡
喜歡0
您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

專注站長素材教程分享
全國免費熱線電話

0769-26628252

周一至周日9:00-23:00

反饋建議

在線QQ咨詢

掃描二維碼關注我們

Copyright©2011-2021 東莞市科森網絡科技有限公司版權所有 Ymzj.Cn Inc. 粵ICP備13005626號 粵公網安備:44190002000522號

足彩网官网