discuz首页调用幻灯片制作教程

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

点击 添加按扭 如下图所示

 

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

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

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

 

接下来 我们输入代码

首先在代码框里面输入

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

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

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

 

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

 

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

复制代码上面的代码必须放在 class=”slidebox”的属性的标签里面 上面已经讲过 ,完整代码如下

 

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

复制代码
接下来我们来增加“滑动”、“点击”的代码   

 

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

复制代码
上面的代码必须放在 class=”slidebox”的属性的标签里面 上面已经讲过 ,完整代码如下

 

  1. <div class=”slidebox”><!–幻灯片开始–>
  2. <div class=”slideshow”> </div><!–图片展示–>
  3. <div class=”slidebar”> </div><!–幻灯片控制展示–>
  4. </div><!–幻灯片结束–>

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

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

如下代码 

  1. <div class=”slideshow”><img src=”{pic}” width=”{picwidth}” height=”{picheight}” /> </div><!–图片展示–>

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

接下来为图片增加循环代码 如下代码

 

  1.  

[loop]

  • <img src=”{pic}” width=”{picwidth}” height=”{picheight}” />
  • [/loop]

    复制代码完整代码如下

     

    1. <div class=”slidebox”><!–幻灯片开始–>
    2. <div class=”slideshow”>
    3.  

    [loop]

  • <img src=”{pic}” width=”{picwidth}” height=”{picheight}” />
  • [/loop]

    </div><!–图片展示–><div class=”slidebar”> </div><!–幻灯片控制展示–></div><!–幻灯片结束–>复制代码接下来 为滑动条增加数字

    在<div class=”slidebar”> </div>中增加娄字变量 如下代码

     

    1. <div class=”slidebar”>
    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 class=”slidebox”><!–幻灯片开始–>
    2. <div class=”slideshow”>
    3. [loop]
    4. <img src=”{pic}” width=”{picwidth}” height=”{picheight}” />
    5. [/loop]
    6. </div>
    7. <!–图片展示–>
    8. <div class=”slidebar”>
    9. [loop1]<span>{currentorder}</span>[/loop1]

      </div><!–幻灯片控制展示–></div><!–幻灯片结束–><script type=”text/javascript”>runslideshow();</script>复制代码
      如下图所示 

       

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

      如下图所示 调用

       

      显示效果

       

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

      下面讲解一些高级参数

      1、滑动条如何控制让用户点击还是滑动  
            在<div class=”slidebar”> 中加入参数  (鼠标滑动)mevent=”mouseover”  或   (鼠标点击)mevent=”click”   
            完整代码如下  以下代码实现 点击后变换

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

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

       

         
          添加如下代码即可实现

      1. <div class=”slidebarup”>
      2. <span>up</span>
      3. </div>
      4. <div class=”slidebardown”>
      5. <span>down</span>
      6. </div>

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

      3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法  在需要展示的地方增加如下代码

      1. <div class=”slideother”>
      2.         <span>可以是任何内容</span>
      3. </div>

      复制代码同时支持多个slideother   如下代码

       

      1. <div class=”slideother”>
      2.         <span>内容一</span>
      3. </div>
      4. <div class=”slideother”>
      5.         <span>内容二</span>
      6. </div>

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

      1. <div class=”slidebox” timestep=”3000″>

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

       

         
              在<div class=”slidebox” >增加参数  如下代码 

       

      1. <div class=”slidebox”  slidenum=”3″ slidestep=”1″>

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


      以上为幻灯片的所有功能

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

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

      效果一

      实现代码

       

      1. <div class=”slidebox”>
      2. <div class=”slideshow”>
      3.  

      [loop]

    10.                     <a href=”{url}”{target}><img src=”{pic}” width=”{picwidth}” height=”{picheight}” /></a>
    11.                         [/loop]

      </div>                <div class=”bignews_btns”>                    <div class=”btns slidebar”>

      [loop1]

    12.                         <em></em>
    13.                                                 [/loop1]

                                </div>                    <div class=”desc slideother”>

      [loop2]

    14.                     <a href=”{url}”{target}>{title}</a>
    15. [/loop2]

      </div>                      </div></div><script type=”text/javascript”>runslideshow();</script>复制代码
      效果二

       

      实现代码

      1. <div class=”slidebox” timestep=”3000″>
      2.                   <div class=”thumb on slideshow” >
      3.  

      [loop]

    16.                <span>
    17.                             <a href=”{url}”{target}><img src=”{pic}” width=”{picwidth}” height=”{picheight}” /></a>
    18.                 <p><a href=”{url}”{target}>查看</a></p>
    19.                                 </span>
    20.                         [/loop]

                  </div>            <div class=”product_desc”>                    <div class=”on slideother” >

      [loop1]

    21.                                 <span>
    22.                    <h2 class=”title”><a href=”{url}”{target}>{title}</a></h2>
    23.                     <p>{summary}</p>
    24.                                         </span>
    25.                                 [/loop1]

                             </div>                <div class=”product_price on slideother” >

      [loop2]

    26.                    <span>{dateline}</span>
    27.                                    [/loop2]

                      </div>                <div class=”btns slidebar”>                    [loop3]<em>{currentorder}</em>[/loop3]                </div>            </div>          </div><script type=”text/javascript”>runslideshow();</script>复制代码
      效果三

       

      实现代码

       

      1. <div class=”slidebox” slidenum=”3″ slidestep=”1″ >
      2. <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>
      3.                         <div class=”middle cl” >
      4.                         <ul class=”slideshow”>
      5. [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]
      6.                     </ul>
      7.                 </div>
      8.                 <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>
      9. </div>
      10. <script type=”text/javascript”>
      11. runslideshow();
      12. </script>

      复制代码
      效果四

       

      实现代码

       

      1. <div class=”photobox cl slidebox” timestep=”3000″>
      2.                 <div class=”z leftbtn”>
      3.                     <span>美食大赏</span>
      4.                                 <div class=”slidebar”>
      5.  

      [loop]

    28.                 <em></em>
    29. [/loop]

                                      </div>            </div>            <div class=”y rightpic”>                    <div class=”slideshow”>

      [loop1]

    30.                                 <div>
    31.                     <a href=”{url}”{target}><img src=”{pic}” width=”{picwidth}” height=”{picheight}” /></a>
    32.                     <p><a href=”{url}”{target}>{title}</a></p>
    33.                                 </div>
    34. [/loop1]

              </div>            </div>        </div><script type=”text/javascript”>runslideshow();</script>复制代码
      效果五

       

      实现代码

       

      1. <div class=”z slidebox”>
      2.                 <div class=”box slideshow”>
      3.  

      [loop]

    35.                 <div>
    36.                 <a href=”{url}”{target}><img src=”{pic}” width=”{picwidth}” height=”{picheight}”  /></a>
    37.             </div>
    38.                         [/loop]

              </div>        <div class=”box_btn cl slidebar”>

      [loop1]

    39.                 <div>
    40.                     <span>{title}</span>
    41.             </div>
    42.             [/loop1]

              </div>        <div class=”box_desc slideother”>

      [loop2]

    43.                 <p>
    44.                    <a href=”{url}”{target}>{summary}</a></p>
    45.                         [/loop2]

              </div>        </div><script type=”text/javascript”>runslideshow();</script>复制代码
      效果六

      实现代码

       

      1. <div class=”bignews slidebox ” >
      2. <div class=”slideshow”>[loop]<a href=”{url}”{target}><img src=”{pic}” width=”{picwidth}” height=”{picheight}”/></a>[/loop]</div>
      3.                 <div class=”btns slidebar”>
      4.  

      [loop1]

    46.                     <em>{currentorder}</em>
    47. [/loop1]

                    </div>          </div><script type=”text/javascript”>runslideshow();</script>复制代码
      效果七

      实现代码  

       

      1. <div class=”slidebox “>
      2.         <div class=”slideshow”>[loop]<a href=”{url}”{target}><img src=”{pic}” width=”{picwidth}” height=”{picheight}”/></a>[/loop]</div>
      3.         <dd class=”slidebar”>
      4.  

      [loop1]

    48.                 <em><a href=”#”><img src=”template/default/portal/food/images/num/0{currentorder}.gif” /></a></em>
    49. [/loop1]

              </dd>        <div class=”slideother”>

      [loop2]

    50.                 <div><div class=”title”>
    51.                 <a href=”{url}”{target}>{title}</a>
    52.                 </div>
    53.                 <p>
    54.                         {summary}
    55.                 </p></div>
    56. [/loop2]

              </div></div><script type=”text/javascript”>runslideshow();</script>复制代码
      效果八

      实现代码

       

      1. <div class=”bignews slidebox”>
      2.                     <div class=”picbox slideshow”>
      3.                         [loop]<div><img src=”{pic}” width=”{picwidth}” height=”{picheight}” /></div>[/loop]
      4.                 </div>
      5.                 <div class=”bignews_btn slidebar” mevent=”mouseover” >
      6.  

      [loop1]

    57.                                         <div >
    58.                             <p>
    59.                                 <strong><a href=”{url}”{target}>{title}</a></strong>
    60.                             <em>{summary}</em>
    61.                            </p>
    62.                         <img src=”{pic}” width=”60″ height=”66″  />
    63.                           </div>
    64.                                         [/loop1]

                      </div>            </div><script type=”text/javascript”>runslideshow();</script>复制代码
      效果九

       

      实现代码

       

      1. <div class=”slidebox”>
      2. <div class=”slideshow”>
      3.  

      [loop]

    65.                     <a href=”{url}”{target}><img src=”{pic}” width=”{picwidth}” height=”{picheight}” /></a>
    66.                         [/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]

    67.                  <em><a href=”{url}”{target}>{title}</a></em>
    68.                         [/loop2]

                  </div></div><script type=”text/javascript”>runslideshow();</script>复制代码
      效果十

       

      实现代码

       

      1. <div class=”slidebox”>
      2. <div class=”bignews”>
      3.                 <div class=”slideshow”>
      4.  

      [loop]

    69.                     <a href=”{url}”{target}><img src=”{pic}” width=”{picwidth}” height=”{picheight}” /></a>
    70.                         [/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]

    71.                                         <em>{currentorder}</em>
    72.                                         [/loop1]

                                      </span>                    <em class=”slidebardown”><img src=”template/default/portal/home/images/bignews_right.gif” /></em>            </div>              <div class=”slideother”>

      [loop2]

    73.             <dd >
    74.                 <h2><a href=”{url}”{target}>{title}</a></h2>
    75.                 <p><a href=”{url}”{target}>{summary}</a></p>
    76.                         </dd>
    77.                         [/loop2]

                     </div>        </div></div><script type=”text/javascript”>runslideshow();</script>复制代码
      大家可以参照上面提供的十套代码 仔细研究一下。

●本文来源互联网及网友投稿,如有侵权请及时联系本站进行删除。
●转载原创文章请保留地址及版权信息,否则侵权必究。
●分享目的仅供大家学习和交流,请不要用于商业用途。
●该资源版权归原著作者所有,请于下载后24小时内删除。
●如有链接无法下载、失效或广告,请联系右侧点击QQ咨询处理。
●本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
●如遇到加密压缩包,默认解压密码为"fdeer.com",如遇到无法解压的请联系管理员。

飞鹿日志 » discuz首页调用幻灯片制作教程

发表评论