親注冊登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦!(包涵精彩圖片、文字詳情等)請您及時注冊登錄-bmrsportswear.com
您需要 登錄 才可以下載或查看,沒有賬號?立即注冊
x
幻燈片不僅可以展示圖片的完美效果,吸引視覺感,而且可以展示更多的信息,留住用戶。通常的方法是使用JQ等代碼來做,但容易導致JQ和默認的JS沖突(jQuery和discuz js文件沖突解決辦法),今天在道勤網(wǎng)分享使用discuz默認的DIY來實現(xiàn)調(diào)用幻燈片,以及各種不同的效果如何制作幻燈片。
一、幻燈片的制作流程:
1、制作幻燈片DIY模塊:后臺--》門戶--》模塊模板,點擊 添加按扭,如下圖所示:
1.gif (34.76 KB, 下載次數(shù): 19)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 10:49 上傳
此處可以可以選擇不同的模塊分類,如:附件類、帖子類、文章類、圖片類等等,可以根據(jù)你的需要選擇不同的模塊分類。
下面我們以文章類為例來講解,選擇文章分類,點提交,如下圖所示。為新建的模塊起個名字 如 “百變幻燈片” ,把代碼框里面的內(nèi)容全部刪除 。
2.gif (108.54 KB, 下載次數(shù): 16)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 10:51 上傳
1.1、我們輸入代碼 ,首先在代碼框里面輸入:
- <div class="slidebox"></div>
復制代碼 其中的div可以是任意標簽,如table,span等,我們這里以div為例。此處的標簽必須加一個class="slidebox"的屬性,如下面代碼所示 ,只有包含在有class="slidebox"屬性的標簽里面的內(nèi)容才是幻燈片 ,切記。如下圖所示:
3.gif (54.5 KB, 下載次數(shù): 18)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 10:53 上傳
1.2、我們增加幻燈代碼,下面代碼用來實現(xiàn)圖片(或內(nèi)容)的顯示作用,屬性必須為class="slideshow"的標簽。
- <div class="slideshow"></div>
復制代碼 上面的代碼必須放在 class="slidebox"的屬性的標簽里面,上面已經(jīng)講過 ,完整代碼如下
- <div class="slidebox">
- <div class="slideshow"></div>
- </div>
復制代碼 1.3、我們來增加“滑動”、“點擊”的代碼
- <div class="slidebar"></div>
復制代碼 上面的代碼必須放在 class="slidebox"的屬性的標簽里面,上面已經(jīng)講過 ,完整代碼如下:
- <div class="slidebox"><!--幻燈片開始-->
- <div class="slideshow"> </div><!--圖片展示-->
- <div class="slidebar"> </div><!--幻燈片控制展示-->
- </div><!--幻燈片結(jié)束-->
復制代碼 以上代碼已完成幻燈片的框架,接下來我們?yōu)榛脽羝砑訑?shù)據(jù)代碼 ,在<div class="slideshow"> </div> 代碼中間插入圖片顯示代碼,如下代碼:
- <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--圖片展示-->
復制代碼 其中{pic} 為圖片地址變量, {picwidth}為圖片寬度變量,{picheight}為圖片高度變量
1.4、為圖片增加循環(huán)代碼,如下代碼:
- [loop]
- <img src="{pic}" width="{picwidth}" height="{picheight}" />
- [/loop]
復制代碼 完整代碼如下:
- <div class="slidebox"><!--幻燈片開始-->
- <div class="slideshow">
- [loop]
- <img src="{pic}" width="{picwidth}" height="{picheight}" />
- [/loop]
- </div>
- <!--圖片展示-->
- <div class="slidebar"> </div><!--幻燈片控制展示-->
- </div><!--幻燈片結(jié)束-->
復制代碼 1.5、為滑動條增加數(shù)字
在<div class="slidebar"> </div>中增加婁字變量,如下代碼:
- <div class="slidebar">
- [loop1]<span>{currentorder}</span>[/loop1]
- </div>
復制代碼 其中{currentorder} 是當前顯示的順序數(shù)字 ,其中[loop1]...[/loop1] 為循環(huán),你可能注意到了,這里用了[loop1],如果一個模塊中需要多次循環(huán)時就可以使用 loop1、loop2、loop3 以此類推來實現(xiàn)多處循環(huán)的目的 。
1.6、增加腳本代碼, 以下代碼放在模塊代碼的最后:
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 此時一個簡單的幻燈片模塊就完成了 ,幻燈片DIY模塊的完整代碼如下:
- <div class="slidebox"><!--幻燈片開始-->
- <div class="slideshow">
- [loop]
- <img src="{pic}" width="{picwidth}" height="{picheight}" />
- [/loop]
- </div>
- <!--圖片展示-->
- <div class="slidebar">
- [loop1]<span>{currentorder}</span>[/loop1]
- </div><!--幻燈片控制展示-->
- </div><!--幻燈片結(jié)束-->
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 代碼如下圖所示:
4.gif (58.38 KB, 下載次數(shù): 22)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 10:58 上傳
2、此時我們就可以通過前臺DIY調(diào)用做好的幻燈片模塊了 ,如下圖調(diào)用所示:
5.gif (28.81 KB, 下載次數(shù): 24)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 10:59 上傳
3、顯示效果如下圖所示:
6.gif (31.14 KB, 下載次數(shù): 15)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:00 上傳
至此簡易幻燈片就完成了,需要你通過CSS樣式來配合美化一下。
二、下面講解一些高級參數(shù)
1、滑動條如何控制讓用戶點擊還是滑動
在<div class="slidebar"> 中加入?yún)?shù),(鼠標滑動)mevent="mouhtml" target="_blank" class="relatedlink">seover" 或 (鼠標點擊)mevent="click",完整代碼如下,以下代碼實現(xiàn)點擊后變換:
- <div class="slidebar" mevent="click">
- [loop1]<span>{currentorder}</span>[/loop1]
- </div>
復制代碼 2、如何實現(xiàn)上一個、下一個的效果,如下圖樣式:
7.gif (759 Bytes, 下載次數(shù): 24)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:01 上傳
添加如下代碼即可實現(xiàn):
- <div class="slidebarup">
- <span>up</span>
- </div>
- <div class="slidebardown">
- <span>down</span>
- </div>
復制代碼 標簽為 class="slidebarup" 的為上一個 標簽為 class="slidebardown" 的為下一個。
3、當 slideshow的內(nèi)容展示不全或不在一個區(qū)域時,我們提供了更多內(nèi)容的展示方法,在需要展示的地方增加如下代碼:
- <div class="slideother">
- <span>可以是任何內(nèi)容</span>
- </div>
復制代碼 同時支持多個slideother,如下代碼:
- <div class="slideother">
- <span>內(nèi)容一</span>
- </div>
- <div class="slideother">
- <span>內(nèi)容二</span>
- </div>
復制代碼 4、如何控制幻燈片播放速度
在<div class="slidebox" >增加參數(shù),,其中 timestep="3000" 為毫秒,如下代碼:
- <div class="slidebox" timestep="3000">
復制代碼 5、如何實現(xiàn) 一次顯示多個圖片,每次切換多個,如下圖樣式:
8.gif (10.77 KB, 下載次數(shù): 23)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:04 上傳
在<div class="slidebox" >增加參數(shù),如下代碼:
- <div class="slidebox" slidenum="3" slidestep="1">
復制代碼 其中 slidenum="3" 表示顯示數(shù)量 , slidestep="1" 表示每點擊一次左右按扭,移動的次數(shù)。
以上為幻燈片的所有功能,你可以根據(jù)需要組合不同的需求,再配合CSS做出各類幻燈片效果。
三、下面提供演示站點中門戶及頻道所用到的幻燈片代碼 (大家可以參照所提供的代碼制作出炫麗的幻燈片)
以下所示效果都需要CSS配合
1、效果一:
31.gif (46.83 KB, 下載次數(shù): 20)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:06 上傳
DIY模塊實現(xiàn)代碼
- <div class="slidebox">
- <div class="slideshow">
- [loop]
- <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
- [/loop]
- </div>
- <div class="bignews_btns">
- <div class="btns slidebar">
- [loop1]
- <em></em>
- [/loop1]
- </div>
- <div class="desc slideother">
- [loop2]
- <a href="{url}"{target}>{title}</a>
- [/loop2]
- </div>
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 2、效果二
12.gif (6.06 KB, 下載次數(shù): 23)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:08 上傳
DIY模塊實現(xiàn)代碼
- <div class="slidebox" timestep="3000">
- <div class="thumb on slideshow" >
- [loop]
- <span>
- <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
- <p><a href="{url}"{target}>查看</a></p>
- </span>
- [/loop]
- </div>
- <div class="product_desc">
- <div class="on slideother" >
- [loop1]
- <span>
- <h2 class="title"><a href="{url}"{target}>{title}</a></h2>
- <p>{summary}</p>
- </span>
- [/loop1]
- </div>
- <div class="product_price on slideother" >
- [loop2]
- <span>{dateline}</span>
- [/loop2]
- </div>
- <div class="btns slidebar">
- [loop3]<em>{currentorder}</em>[/loop3]
- </div>
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 3、效果三
13.gif (11.82 KB, 下載次數(shù): 16)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:09 上傳
DIY模塊實現(xiàn)代碼
- <div class="slidebox" slidenum="3" slidestep="1" >
- <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 class="middle cl" >
- <ul class="slideshow">
- [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]
- </ul>
- </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>
- <script type="text/javascript">
- runslideshow();
- </script>
-
復制代碼 4、效果四
14.gif (28.45 KB, 下載次數(shù): 23)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:11 上傳
DIY模塊實現(xiàn)代碼
- <div class="photobox cl slidebox" timestep="3000">
- <div class="z leftbtn">
- <span>美食大賞</span>
- <div class="slidebar">
- [loop]
- <em></em>
- [/loop]
- </div>
- </div>
- <div class="y rightpic">
- <div class="slideshow">
- [loop1]
- <div>
- <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
- <p><a href="{url}"{target}>{title}</a></p>
- </div>
- [/loop1]
- </div>
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 5、效果五
15.gif (103.12 KB, 下載次數(shù): 18)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:13 上傳
DIY模塊實現(xiàn)代碼
- <div class="z slidebox">
- <div class="box slideshow">
- [loop]
- <div>
- <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
- </div>
- [/loop]
- </div>
- <div class="box_btn cl slidebar">
- [loop1]
- <div>
- <span>{title}</span>
- </div>
- [/loop1]
- </div>
- <div class="box_desc slideother">
- [loop2]
- <p>
- <a href="{url}"{target}>{summary}</a></p>
- [/loop2]
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 6、效果六
16.jpg (41.1 KB, 下載次數(shù): 20)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:15 上傳
- <div class="bignews slidebox " >
- <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
- <div class="btns slidebar">
- [loop1]
- <em>{currentorder}</em>
- [/loop1]
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 7、效果七
17.gif (14.85 KB, 下載次數(shù): 22)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:16 上傳
DIY模塊實現(xiàn)代碼
- <div class="slidebox ">
- <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
- <dd class="slidebar">
- [loop1]
- <em><a href="#"><img src="template/default/portal/food/images/num/0{currentorder}.gif" /></a></em>
- [/loop1]
- </dd>
- <div class="slideother">
- [loop2]
- <div><div class="title">
- <a href="{url}"{target}>{title}</a>
- </div>
- <p>
- {summary}
- </p></div>
- [/loop2]
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 8、效果八
18.gif (80.88 KB, 下載次數(shù): 16)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:18 上傳
DIY模塊實現(xiàn)代碼
- <div class="bignews slidebox">
- <div class="picbox slideshow">
- [loop]<div><img src="{pic}" width="{picwidth}" height="{picheight}" /></div>[/loop]
- </div>
- <div class="bignews_btn slidebar" mevent="mouseover" >
- [loop1]
- <div >
- <p>
- <strong><a href="{url}"{target}>{title}</a></strong>
- <em>{summary}</em>
- </p>
- <img src="{pic}" width="60" height="66" />
- </div>
- [/loop1]
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 9、效果九
19.gif (50.48 KB, 下載次數(shù): 25)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:21 上傳
DIY模塊實現(xiàn)代碼
- <div class="slidebox">
- <div class="slideshow">
- [loop]
- <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
- [/loop]
- </div>
- <div class="btn">
- <em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em>
- <em class="slidebar">[loop1]<span><img src="template/default/portal/car/images/empty_img.gif" width="8" height="8"/></span>[/loop1]</em>
- <em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em>
- </div>
- <div class="bignews_title slideother">
- [loop2]
- <em><a href="{url}"{target}>{title}</a></em>
- [/loop2]
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 10、效果十
20.gif (100.93 KB, 下載次數(shù): 17)
下載附件
Discuz各類幻燈片的制作方法 - 完全支持DIY
2017-12-16 11:22 上傳
DIY模塊實現(xiàn)代碼
- <div class="slidebox">
- <div class="bignews">
- <div class="slideshow">
- [loop]
- <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
- [/loop]
- </div>
- </div>
- <div class="bignewsdesc">
- <div class="bignewsbtn">
- <em class="slidebarup"><img src="template/default/portal/home/images/bignews_left.gif" /></em>
- <span class="slidebar">
- [loop1]
- <em>{currentorder}</em>
- [/loop1]
- </span>
- <em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em>
- </div>
- <div class="slideother">
- [loop2]
- <dd >
- <h2><a href="{url}"{target}>{title}</a></h2>
- <p><a href="{url}"{target}>{summary}</a></p>
- </dd>
- [/loop2]
- </div>
- </div>
- </div>
- <script type="text/javascript">
- runslideshow();
- </script>
復制代碼 大家可以參照上面提供的十套代碼,仔細研究一下,百變幻燈 隨你而變。
道勤主機提供365天*24小時全年全天無休、實時在線、零等待的售后技術支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題!
如果您是道勤主機用戶,那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信:q792472177免費電話、后臺提交工單這些方式聯(lián)系道勤主機客服!
如果您不是我們的客戶也沒問題,點擊頁面最右邊的企業(yè)QQ在線咨詢圖標聯(lián)系我們并購買后,我們?yōu)槟赓M進行無縫搬家服務,讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機的服務! |