XOOPS China - "绿野"首页的新闻幻灯是怎么做的？ [技术论坛

XOOPS China 讨论区 > XOOPS Theme (主题) > 主题综合 > [已解决] "绿野"首页的新闻幻灯是怎么做的？

正在浏览： 1 名游客

到底部

前一个主题

下一个主题 [无发表权] 请登录或者注册

工藤翼

"绿野"首页的新闻幻灯是怎么做的？

中级会员

注册日期:
2006/7/6 22:50

所属群组：
注册会员

帖子: 54 | 精华: 1

等级： 6; EXP： 19
HP： 0 / 129
MP： 18 / 1590

先看下这个网站：http://www.lvye.info/

有2个问题：
1.首页的新闻幻灯是怎么做的？

2.在往下看，区块导航标题：
户外装备
装备测评背包 | 帐篷 | 睡袋 | 服装 | 鞋袜 | 户外用具
登山探险高山 | 攀岩

后面的导航怎么弄的，有的没有有的有？直接用THEME可以做出来吗？请指导。

2006/8/18 8:19

工具箱

短消息

PDF

书签

打印

agl

回复: 关于首页的区块的2问

Support Team

注册日期:
2005/4/30 13:09

来自安徽安庆

所属群组：
网站管理员

帖子: 510 | 精华: 3

等级： 20; EXP： 84
HP： 0 / 496
MP： 170 / 7788

1.写了一个区块，javascript参照新浪的图片实现方式，取的文章是某一分类的前5篇文章，图片是编辑文章上传的。



<style type="text/css">

.glow{color:#ffffff;filter:glow(strength=1,color=#003366);height:0;padding:2px;}

.shadow{color:#ffffff;filter:dropShadow(offX=1,offY=1,color=#5F0000);height:0;}

.linkWhite a:link,.linkWhite a:visited {text-decoration:none;color:#015050;}

.linkWhite a:active,.linkWhite a:hover {text-decoration:none;color:#009779;}

.num01

{

    margin-right:6px;

}

.itemOff{background-color:#31a195;text-align:center;font-size:12px;font-family:Arial;cursor:pointer;color: White;font-weight: bold;}

.itemOn{background: #ff9c00;color: White;text-align:center;font-size:12px;font-family:Arial;cursor:default;font-weight: bold;}



</style>



<script language='javascript' type='text/javascript'>

    <!--

i=0;

/* Data begin */

var sPicArr = new Array();

<{foreach item=article from=$block.articles}>

sPicArr[i] = new Array("<{$article.art_image}>","<{$article.art_title}>","<{$article.art_summary}>","<{$xoops_url}>/modules/<{$block.dirname}>/view.article.php/<{$article.art_id}>/c<{$article.cat_id}>");

i=i+1;

<{/foreach}>

/* Data end */





    function GetObj(objName){

        if(document.getElementById){

            return eval('document.getElementById("' + objName + '")');

        }else if(document.layers){

            return eval("document.layers['" + objName +"']");

        }else{

            return eval('document.all.' + objName);

        }

    }

    var plPic = new Image();

    var gIndex = 0;

    function SlidePic(index){

        gIndex = index;

//patch by dorian 1017

        if ('Microsoft Internet Explorer' == navigator.appName)



        {

        document.images["slidePic"].filters.item(0).Apply();

        }

        

        document.images["slidePic"].src = sPicArr[index][0];

        document.images["slidePic"].alt = sPicArr[index][1];

        GetObj("slidePicLink").href = sPicArr[index][3];

        GetObj("slideTitle").innerHTML = sPicArr[index][1];

        GetObj("slideDesc").innerHTML = sPicArr[index][2];

        GetObj("slideLink").innerHTML = "[<a href='"+sPicArr[index][3]+"' target=_blank title='&Egrave;&laquo;&Icirc;&Auml;'>&Egrave;&laquo;&Icirc;&Auml;</a>]";



        

        if((index+1)<sPicArr.length) plPic.src = sPicArr[index+1][0];//preload;



        for(var i=0;i<sPicArr.length;i++){

            GetObj("item"+i).className = "itemOff";

            GetObj("item"+i).onmouseover = function(){return false;}

            GetObj("item"+i).onmouseout = function(){return false;}

        }

        GetObj("item"+index).className = "itemOn";

        /*fixed by AmourGUO, 051017

        GetObj("item"+index).onmouseover = function(){

            pauseslide();

        }

        GetObj("item"+index).onmouseout = function(){

            inislide();

        }

        */

                  if ('Microsoft Internet Explorer' == navigator.appName)

        {

        document.images["slidePic"].filters.item(0).play();

        }

        

    }



    function NextPic(){

        gIndex = ((gIndex+1)>=sPicArr.length?0:(gIndex+1));

        SlidePic(gIndex);

    }



    function PrevPic(){

    //alert(gIndex);

        gIndex = ((gIndex-1)<0?(sPicArr.length-1):(gIndex-1));

    //alert(gIndex);

        SlidePic(gIndex);

        

    }

    var sid;

    function inislide()

    {

        if(sid==null) sid = setInterval('NextPic()', 5000);//fixed by AmourGUO, 051017

    }

    function pauseslide()

    {

        clearInterval(sid);

        sid = null;//fixed by AmourGUO, 051017

    }

inislide()

    //-->

    </script>

    <table align=center cellspacing=0 >

    <tr >

    <td width=190 valign=top bgcolor="#d2efde">

        <table width=100% cellspacing=0>

<tr>

        <td align=center  style='padding:2px 0px 5px 0px;'><a id=slidePicLink href="<{$xoops_url}>/modules/<{$block.dirname}>/view.article.php/<{$block.faid}>/c<{$block.fcatid}>" target=_blank title=''><img src="<{$block.artimg}>" alt='' name='slidePic' width="180" height="131" hspace="0" border="0" align="right"  id='slidePic' style='border:0px solid #000;filter:revealtrans(duration=2.0,transition=6);' onMouseOver="pauseslide();" onMouseOut="inislide();"></a></td>

        </tr>

      </table>

      </td>

    

    <td   bgcolor="#d2efde" >

        <table  cellspacing=0>    

<tr>

        <td  valign=top style='padding:3px 1px 2px 0px;line-height:15px;font-size: 12px;color: #024747;' onmouseover="pauseslide();" onmouseout="inislide();" width="213" height="108">

            <div id='slideTitle' class='linkWhite' style='font-weight:bold;'><{$block.ftitle}></div>

            <div class='linkWhite' style='margin-top:7px; '><span id='slideDesc'><{$block.fsummary}></span>&nbsp;&nbsp;<span id='slideLink' class=linkYellow>[<a href="<{$xoops_url}>/modules/<{$block.dirname}>/view.article.php/<{$block.faid}>/c<{$block.fcatid}>" title='&Egrave;&laquo;&Icirc;&Auml;'>&Egrave;&laquo;&Icirc;&Auml;</a>]</span></div>

        </td>

        </tr>

<tr>

        <td   height=15  width="150" align="center" bgcolor="#5cc4b4"  >

            <table   cellspacing=0 onMouseOver="pauseslide()" onMouseOut="inislide()"><!--//fixed by AmourGUO, 051017-->

            <tr>

            <td width=12><img src="<{$block.themeimg_url}>/left_arrow.jpg" width="10" height="11" alt='&Eacute;&Iuml;&Ograve;&raquo;&Otilde;&Aring;' onClick='PrevPic();pauseslide();inislide()' style='cursor:pointer; margin-left:10px;'></td>

            <td style="font-size:12px;border: none;margin: 0 0 0 0;padding: 0 0 0 0; ">

                <script language='javascript' type='text/javascript'>

                <!--

                document.writeln("<table width=100% cellspacing=0>");

                document.writeln("<tr>");



                document.writeln("<td>&nbsp;</td>");

                document.writeln("<td id='item0' width=13 height=11 class=itemOn onClick='SlidePic(0)'>1</td>");

                for(var i=1;i<sPicArr.length;i++){



                    document.writeln("<td>&nbsp;</td>");

                    document.writeln("<td id='item"+i+"' width=13 height=11 class=itemOff onClick='SlidePic("+i+");'>"+(i+1)+"</td>");//fixed by AmourGUO, 051017

                }

                document.writeln("<td>&nbsp;</td>");

                document.writeln("</tr>");

                document.writeln("</table>");

                //-->

                </script>

            </td>

            <td width=20><img src="<{$block.themeimg_url}>/right_arrow.jpg" width="10" height="11" alt='&Iuml;&Acirc;&Ograve;&raquo;&Otilde;&Aring;' onClick='NextPic();pauseslide();inislide()' style='cursor:pointer;'></td>

            </tr>

            </table>

          </td>

        </tr>

        

      </table>

        

    </td>

    </tr>

    </table>

2.block在options参照定制区块实现方式，用编辑器写一些静态html到block的options，这样可以将在每个栏目前面显示图片或别的东西

以上操作都是在xoops本身区块功能基础上完成

2006/8/18 9:13

工具箱

短消息

PDF

书签

打印

工藤翼

回复: 关于首页的区块的2问

中级会员

注册日期:
2006/7/6 22:50

所属群组：
注册会员

帖子: 54 | 精华: 1

等级： 6; EXP： 19
HP： 0 / 129
MP： 18 / 1590

先感谢下。
1.有个疑问在区块好象不能加javascript~
2.第2个问题能仔细点吗？有点没看懂~

2006/8/18 10:23

工具箱

短消息

PDF

书签

打印

agl

回复: 关于首页的区块的2问

Support Team

注册日期:
2005/4/30 13:09

来自安徽安庆

所属群组：
网站管理员

帖子: 510 | 精华: 3

等级： 20; EXP： 84
HP： 0 / 496
MP： 170 / 7788

1.我已经将我这边区块对应的theme全部帖出来了，这个theme很多模仿art_article.html,只是增加了新浪javascript实现图片幻灯的实现方式，我是在theme里加javascript，实际证明是可以实现的
2.block的options主要是实现不同区块的要求，例如某个区块显示最新文章，可以设置显示10篇，按什么排序，这些都是写到options[0]，options[1]里，如果你研究过自定义区块的话，其html编辑器编辑的内容也是写的options数组中，所以可以在任一区块里将自定义区块编辑器那块代码加入，添加html静态内容到options里，这样区块显示的内容可以是静动内容的结合。
上面语言我表达不是很清楚，建议还是先花几天熟悉xoops区块的实现方式，再来看下

2006/8/18 10:53

工具箱

短消息

PDF

书签

打印

samy

回复: "绿野"首页的新闻幻灯是怎么做的？

中级会员

注册日期:
2007/1/31 21:45

所属群组：
注册会员

帖子: 55

等级： 6; EXP： 27
HP： 0 / 131
MP： 18 / 1392

AGL你好，很佩服你的新闻幻灯区块
看了你写的代码，可是还是不太明白

能不能给大家写个教程啊，一步一步傻瓜式的教程？？

多谢了

2007/2/14 18:10

工具箱

短消息

PDF

书签

打印

kongqq

回复: "绿野"首页的新闻幻灯是怎么做的？

Support Team

注册日期:
2004/12/15 5:07

所属群组：
注册会员
推广组

帖子: 71 | 精华: 2

等级： 7; EXP： 34
HP： 0 / 158
MP： 23 / 2662

其实实现幻灯片播放也有比较初级的简单方法~

这里我介绍一种

第一步：下载一个幻灯片的源码文件，我这里用这个下载

第二步：解压下载回的压缩包，将文件夹中的bcastr.swf文件以及xml文件夹上传到你网站的根目录下面

第三步：将你要用到的图片上传到根目录下面的images目录下面

第四步：xml文件夹中的bcastr.xml文件是控制幻灯片播放图片和链接的，可以按照自己的需求设置

第五步：进入后台的区块设置，添加一个新的自定义区块，按照readme.txt中的方法将代码复制到区块中，选择html输出就可以了。

我介绍的这个方法优点是设置简单，缺点是更新的时候需要手工操作~大家按照自己的习惯选择吧~

2007/3/13 11:07

工具箱

短消息

PDF

书签

打印

hasj

回复: "绿野"首页的新闻幻灯是怎么做的？

资深会员