欢迎访问华联信!

百变幻灯片,完全DIY(高级教程)

[复制链接]
 
1589 0
华联信阿伟 发表于 2016-12-19 15:40:49 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

在DIY时如何调用幻灯片,幻灯片该如何制作,这一讲我们来教大家如何制作幻灯片
请跟随教程从头到尾仔细阅读,你将收获不小

第一步制作幻灯片:后台--》门户--》模块模板

点击 添加按扭 如下图所示

此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类

下面我们以文章类为例来讲解,选择文章分类 点提交 如下图所示 ,为新建的模块起个名字 如 “百变幻灯片”  

把代码框里面的内容全部删除

接下来 我们输入代码

首先在代码框里面输入
1.  <divclass="slidebox"></div>

复制代码
其中的div可以是任意标签,如table,span等,我们这里以div为例

此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ,只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ,切记
如下图所示

接下来,我们增加幻灯代码  下面代码用来实现图片(或内容)的显示作用 属性必须为class="slideshow"的标签
1.  <divclass="slideshow"></div>

复制代码
上面的代码必须放在class="slidebox"的属性的标签里面 上面已经讲过,完整代码如下
1.  <divclass="slidebox">
2.   
3.  <divclass="slideshow"></div>
4.   
5.  </div>

复制代码

接下来我们来增加“滑动”、“点击”的代码   
1.  <divclass="slidebar"></div>

复制代码

上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过,完整代码如下
1.  <divclass="slidebox"><!--幻灯片开始-->
2.   
3.  <divclass="slideshow"> </div><!--图片展示-->
4.   
5.  <divclass="slidebar"> </div><!--幻灯片控制展示-->
6.   
7.  </div><!--幻灯片结束-->

复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码

在<divclass="slideshow"> </div> 代码中间插入图片显示代码

如下代码
1.  <divclass="slideshow"><img src="{pic}"width="{picwidth}" height="{picheight}" /></div><!--图片展示-->

复制代码
其中{pic} 为图片地址变量, {picwidth}为图片宽度变量,{picheight}为图片高度变量

接下来为图片增加循环代码 如下代码
1.  [loop]
2.  <imgsrc="{pic}" width="{picwidth}"height="{picheight}" />
3.  [/loop]

复制代码
完整代码如下
1.  <divclass="slidebox"><!--幻灯片开始-->
2.  <divclass="slideshow">
3.  [loop]
4.  <imgsrc="{pic}" width="{picwidth}"height="{picheight}" />
5.  [/loop]
6.  </div>
7.  <!--图片展示-->
8.  <divclass="slidebar"> </div><!--幻灯片控制展示-->
9.  </div><!--幻灯片结束-->

复制代码
接下来 为滑动条增加数字

在<div class="slidebar"> </div>中增加娄字变量 如下代码
1.  <divclass="slidebar">
2.  [loop1]<span>{currentorder}</span>[/loop1]
3.  </div>

复制代码
其中{currentorder} 是当前显示的顺序数字  ,其中[loop1]...[/loop1] 为循环,你可能注意到了,这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的

较后增加脚本代码 如下  以下代码放在模块代码的较后
1.  <scripttype="text/javascript">
2.  runslideshow();
3.  </script>

复制代码

此时一个简单的幻灯片就完成了 ,幻灯片的完整代码 如下
1.  <divclass="slidebox"><!--幻灯片开始-->
2.  <divclass="slideshow">
3.  [loop]
4.  <imgsrc="{pic}" width="{picwidth}"height="{picheight}" />
5.  [/loop]
6.  </div>
7.  <!--图片展示-->
8.  <divclass="slidebar">
9.  [loop1]<span>{currentorder}</span>[/loop1]
10.</div><!--幻灯片控制展示-->
11.</div><!--幻灯片结束-->
12.
13.<script type="text/javascript">
14.runslideshow();
15.</script>

复制代码

如下图所示

此时我们就可以通过前台DIY调用了

如下图所示 调用

显示效果

至此简易幻灯片就完成了,需要你通过CSS样式来配合美化一下

下面讲解一些高级参数

1、滑动条如何控制让用户点击还是滑动  
      在<divclass="slidebar"> 中加入参数  (鼠标滑动)mevent="mouseover"  或  (鼠标点击)mevent="click"   
      完整代码如下  以下代码实现点击后变换
1.  <divclass="slidebar" mevent="click">
2.  [loop1]<span>{currentorder}</span>[/loop1]
3.  </div>

复制代码

2、如何实现上一个 下一个的效果 如下图样式

   
    添加如下代码即可实现
1.  <divclass="slidebarup">
2.  <span>up</span>
3.  </div>
4.   
5.  <divclass="slidebardown">
6.  <span>down</span>
7.  </div>

复制代码
标签为 class="slidebarup" 的为上一个    标签为  class="slidebardown"  的为下一个  

3、当 slideshow的内容展示不全或 不在一个区域时我们提供了 更多内容的展示方法  在需要展示的地方增加如下代码
1.  <divclass="slideother">
2.         <span>可以是任何内容</span>
3.  </div>

复制代码
同时支持多个slideother  如下代码
1.  <divclass="slideother">
2.         <span>内容一</span>
3.  </div>
4.   
5.  <divclass="slideother">
6.         <span>内容二</span>
7.  </div>
8.   

复制代码
4、如何控制幻灯片播放的速度
      在<divclass="slidebox" >增加参数  如下代码  其中timestep="3000"  为毫秒
1.  <divclass="slidebox" timestep="3000">

复制代码

5、如何实现 一次显示多个图片,每次切换多个 如下图样式

   
        在<div class="slidebox" >增加参数  如下代码
1.  <divclass="slidebox"  slidenum="3"slidestep="1">

复制代码
其中  slidenum="3"  表示显示数量  , slidestep="1" 表示每点击一次左右按扭移动的次数


以上为幻灯片的所有功能

下面提供演示站点中门户及频道所用到的幻灯片代码 (大家可以参照所提供的代码制作出炫丽的幻灯片)

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

效果一


实现代码
1.  <divclass="slidebox">
2.  <divclass="slideshow">
3.                        [loop]
4.                    <a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}" /></a>
5.                        [/loop]
6.  </div>
7.                 <divclass="bignews_btns">
8.                    <div class="btns slidebar">
9.                                     [loop1]
10.                       <em></em>
11.                                              [/loop1]
12.                         </div>
13.                   <div class="desc slideother">
14.[loop2]
15.                   <ahref="{url}"{target}>{title}</a>
16.[/loop2]
17.</div>
18.                     </div>
19.</div>
20.<script type="text/javascript">
21.runslideshow();
22.</script>

复制代码

效果二


实现代码
1.  <divclass="slidebox" timestep="3000">
2.                   <divclass="thumb on slideshow" >
3.                        [loop]
4.                <span>
5.                            <ahref="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a>
6.                 <p><ahref="{url}"{target}>查看</a></p>
7.                                </span>
8.                        [/loop]
9.             </div>
10.            <divclass="product_desc">
11.                   <div class="on slideother" >
12.                              [loop1]
13.                              <span>
14.                  <h2 class="title"><ahref="{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>

复制代码

效果三


实现代码
1.  <divclass="slidebox" slidenum="3" slidestep="1" >
2.  <divclass="leftbtn slidebarup"><ahref="javascript:void(0);" mevent="click" ><imgsrc="template/default/portal/index/images/commend_bg_2_leftbtn.gif"/></a></div>
3.                        <div class="middle cl" >
4.                        <ul class="slideshow">
5.  [loop]<li><ahref="{url}"{target}><img src="{avatar_big}"width="{picwidth}" height="{picheight}"/></a><p><ahref="{url}"{target}>{title}</a></p></li>[/loop]
6.                    </ul>
7.                 </div>
8.                 <divclass="rightbtn slidebardown "><ahref="javascript:void(0);" mevent="click"><imgsrc="template/default/portal/index/images/commend_bg_2_rightbtn.gif"/></a></div>
9.  </div>
10.<script type="text/javascript">
11.runslideshow();
12.</script>
13.

复制代码

效果四


实现代码
1.  <divclass="photobox cl slidebox" timestep="3000">
2.                 <divclass="z leftbtn">
3.                    <span>美食大赏</span>
4.                                <divclass="slidebar">
5.  [loop]
6.                <em></em>
7.  [/loop]
8.                                </div>
9.             </div>
10.            <divclass="y rightpic">
11.                   <div class="slideshow">
12.[loop1]
13.                              <div>
14.                   <a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}" /></a>
15.                   <p><ahref="{url}"{target}>{title}</a></p>
16.                              </div>
17.[/loop1]
18.        </div>
19.           </div>
20.        </div>
21.<script type="text/javascript">
22.runslideshow();
23.</script>

复制代码

效果五


实现代码
1.  <divclass="z slidebox">
2.                 <divclass="box slideshow">
3.                        [loop]
4.                 <div>
5.                 <ahref="{url}"{target}><img src="{pic}"width="{picwidth}"height="{picheight}"  /></a>
6.             </div>
7.                        [/loop]
8.         </div>
9.         <div class="box_btn clslidebar">
10.                       [loop1]
11.               <div>
12.                   <span>{title}</span>
13.           </div>
14.            [/loop1]
15.        </div>
16.        <divclass="box_desc slideother">
17.                       [loop2]
18.               <p>
19.                  <ahref="{url}"{target}>{summary}</a></p>
20.                       [/loop2]
21.        </div>
22.        </div>
23.<script type="text/javascript">
24.runslideshow();
25.</script>

复制代码

效果六


实现代码
1.  <divclass="bignews slidebox " >
2.  <divclass="slideshow">[loop]<ahref="{url}"{target}><img src="{pic}"width="{picwidth}"height="{picheight}"/></a>[/loop]</div>
3.                 <divclass="btns slidebar">
4.  [loop1]
5.                    <em>{currentorder}</em>
6.  [/loop1]
7.               </div>
8.           </div>
9.  <scripttype="text/javascript">
10.runslideshow();
11.</script>

复制代码

效果七

实现代码  
1.  <divclass="slidebox ">
2.         <divclass="slideshow">[loop]<a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}"/></a>[/loop]</div>
3.         <dd class="slidebar">
4.  [loop1]
5.                 <em><ahref="#"><imgsrc="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>

复制代码

效果八


实现代码
1.  <divclass="bignews slidebox">
2.                    <div class="picbox slideshow">
3.                        [loop]<div><img src="{pic}"width="{picwidth}" height="{picheight}"/></div>[/loop]
4.                 </div>
5.                 <divclass="bignews_btn slidebar" mevent="mouseover" >
6.                        [loop1]
7.                                       <div >
8.                            <p>
9.                                <strong><ahref="{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>

复制代码

效果九


实现代码
1.  <divclass="slidebox">
2.   
3.  <divclass="slideshow">
4.                        [loop]
5.                     <ahref="{url}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}" /></a>
6.                        [/loop]
7.  </div>
8.             <div class="btn">
9.                 <emclass="slidebarup"><imgsrc="template/default/portal/car/images/bignews_btn_left.gif"/></em>
10.              <em class="slidebar">[loop1]<span><imgsrc="template/default/portal/car/images/empty_img.gif"width="8" height="8"/></span>[/loop1]</em>
11.               <em class="slidebardown"><imgsrc="template/default/portal/car/images/bignews_btn_right.gif"/></em>
12.           </div>
13.            <divclass="bignews_title slideother">
14.                       [loop2]
15.                <em><ahref="{url}"{target}>{title}</a></em>
16.                       [/loop2]
17.           </div>
18.</div>
19.<script type="text/javascript">
20.runslideshow();
21.</script>

复制代码

效果十


实现代码
1.  <divclass="slidebox">
2.  <divclass="bignews">
3.                 <divclass="slideshow">
4.                        [loop]
5.                    <a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}" /></a>
6.                        [/loop]
7.             </div>
8.         </div>
9.         <div class="bignewsdesc">
10.               <div class="bignewsbtn">
11.                   <em class="slidebarup"><imgsrc="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"><imgsrc="template/default/portal/home/images/bignews_right.gif"/></em>
18.           </div>
19.             <div class="slideother">
20.                       [loop2]
21.            <dd>
22.               <h2><ahref="{url}"{target}>{title}</a></h2>
23.               <p><ahref="{url}"{target}>{summary}</a></p>
24.                       </dd>
25.                       [/loop2]
26.              </div>
27.        </div>
28.</div>
29.<script type="text/javascript">
30.runslideshow();
31.</script>
32.

复制代码

大家可以参照上面提供的十套代码 仔细研究一下。

百变幻灯 随你而变


感谢大家


延伸阅读:

全方位立体式讲解DIY技巧集锦
http://www.discuz.net/thread-1909461-1-1.html

百变幻灯片,完全DIY(高级教程)
http://www.discuz.net/thread-1906721-1-1.html

教你如何把切割好的html页面转换成可供DIY的页面(高级教程)
http://www.discuz.net/thread-1908115-1-1.html

全方位立体式讲解DIY技巧集锦第二弹
http://www.discuz.net/thread-1925337-1-1.html

轻松运营(1)Discuz!X 1.5二级域名设置
http://www.discuz.net/thread-1879755-1-1.html

Discuz! X1.5
运营宝典(二)妙用频道功能,轻松提升媒体价值
http://www.discuz.net/thread-1865090-1-1.html

回复

使用道具 举报

精彩评论0

跳转到指定楼层
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信关注
惠城地址:麦地路69号达利大厦19楼(人人乐对面) 惠阳地址:惠阳区淡水金惠大道景茂国际大厦15楼(天虹旁边) 服务热线:400-000-0752 粤ICP备11082595号-23
快速回复 返回顶部 返回列表
av2014天堂网 手机版_avtt天堂东京热一道本_亚洲男人天堂网2014av