XOOPS China - 新浪新闻的幻灯片，代码问题！！！ [技术论坛

XOOPS China 讨论区 > XOOPS Theme (主题) > 主题综合 > 新浪新闻的幻灯片，代码问题！！！

正在浏览： 1 名游客

到底部

前一个主题

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

(1) 2 3 »

seven

新浪新闻的幻灯片，代码问题！！！

新进会员

注册日期:
2007/3/23 12:18

所属群组：
注册会员

帖子: 16

等级： 2; EXP： 74
HP： 0 / 43
MP： 5 / 479



<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>

这段代码有人能帮我们新手解释下吗？？？

注释下主要的地方也好呀。比方说不是原模块，取其中几个分类中的图片再做说明。。。。

小弟在这谢过了。

2007/3/28 16:36

工具箱

短消息

PDF

书签

打印

superray

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

新进会员

注册日期:
2006/1/15 22:40

所属群组：
注册会员

帖子: 13

等级： 2; EXP： 38
HP： 0 / 34
MP： 4 / 498

非常感谢agl分享如此优秀的代码，查看此帖。
绿野首页新闻幻灯的效果真的很不错，可是要想用好它还需要hack一下。本人研究了agl的代码后摸索出了一些小技巧，并做了一点改进，在此分享一下，希望能对比我还新的新手提供点帮助。
第一步：agl 原来的代码是以前版本 article 的，不适用于新版本1.0。这是本人改过后的代码，并增加了有无图片附件的判断，有图片才显示。代码：



<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}><{if $article.image.url}>  sPicArr[i] = new Array("<{$article.image.url}>","<{$article.art_title}>","<{$article.art_summary}>","<{$xoops_url}>/modules/<{$block.dirname}>/view.article.php/<{$article.art_id}>/c<{$article.cat_id}>"); 

i=i+1; 

<{/if}><{/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='全文'>全文</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"; 

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="<{$article.image.url}>" 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='全文'>全文</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='上一张' 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='下一张' onClick='NextPic();pauseslide();inislide()' style='cursor:pointer;'></td> 

</tr> 

</table> 

</td> 

</tr> 

</table> 

</td> 

</tr> 

</table>

第二步：复制上面代码另存为 “modules/article/templates/blocks/article_slidenews.html”
第三步：编辑“modules/article/xoops_version.php”在区块部分增加一个新区块。
插入以下代码：



$modversion["blocks"][]    = array(

    "file"            => "blocks.article.php",

    "name"            => art_constant("MI_BLOCK_JSLIDE"),

    "description"    => "最新消息－JS 幻灯新闻",

    "show_func"        => $GLOBALS["ART_VAR_PREFIX"]."_article_show",

    "options"        => "time|10|2|0|c|0",

    "edit_func"        => $GLOBALS["ART_VAR_PREFIX"]."_article_edit",

    "template"        => $GLOBALS["artdirname"]."_slidenews.html",

    );

第四步：编辑语言文件“modules/article/language/schinese/modinfo.php”增加区块语言。
代码：



define($GLOBALS["ART_VAR_PREFIXU"]."_MI_BLOCK_JSLIDE", "JS 幻灯文章");

第五步：OK,后台更新article模块，会多出一个“JS 幻灯文章”的新区块，接下来正常使用区块吧。
演示请看中国孔孟圣地图片网。

2007/3/29 17:38

工具箱

短消息

PDF

书签

打印

hasj

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

资深会员

注册日期:
2004/12/5 19:34

来自 308627538

所属群组：
注册会员

帖子: 244 | 精华: 5

等级： 14; EXP： 60
HP： 0 / 340
MP： 81 / 6014

我按你的方法试了,但还是没有搞起来...没搞成功...我按你上面的代码直接复制了就拿来用的....没有做过修改...讲教下是不是有哪个重要的地方...要自已手动的修改下代码才行的呢...如果是的话...也请你讲明下我要改哪个变量才能.....请你能详细说明下...

2007/3/30 2:43

工具箱

短消息

PDF

书签

打印

hasj

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

资深会员

注册日期:
2004/12/5 19:34

来自 308627538

所属群组：
注册会员

帖子: 244 | 精华: 5

等级： 14; EXP： 60
HP： 0 / 340
MP： 81 / 6014

请看附件

附件:

{B8E18808-D5F5-4CD5-9155-E93AE53A4F7E}0.jpg (20.72 KB)

2007/3/30 2:46

工具箱

短消息

PDF

书签

打印

superray

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

新进会员

注册日期:
2006/1/15 22:40

所属群组：
注册会员

帖子: 13

等级： 2; EXP： 38
HP： 0 / 34
MP： 4 / 498

引用:

hasj 写道：
我按你的方法试了,但还是没有搞起来...没搞成功...我按你上面的代码直接复制了就拿来用的....没有做过修改...讲教下是不是有哪个重要的地方...要自已手动的修改下代码才行的呢...如果是的话...也请你讲明下我要改哪个变量才能.....请你能详细说明下...

不用修改，可以用的。
你的article版本？这个是1.0的。
如果是0.9x的请把代码中的<{$article.image.url}>替换成<{$article.art_image}>。从你的截图看已经取得文章了，只是没获取图片，应该是版本问题吧。

2007/3/30 3:07

工具箱

短消息

PDF

书签

打印

superray

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

新进会员

注册日期:
2006/1/15 22:40

所属群组：
注册会员

帖子: 13

等级： 2; EXP： 38
HP： 0 / 34
MP： 4 / 498

呵呵，刚发了帖就不能编辑了。请直接下载附件吧，贴代码时可能出问题。

附件:

article_slidenews.zip 大小: 2.12 KB; 下载次数: 473

2007/3/30 3:11

工具箱

短消息

PDF

书签

打印

hasj

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

资深会员

注册日期:
2004/12/5 19:34

来自 308627538

所属群组：
注册会员

帖子: 244 | 精华: 5

等级： 14; EXP： 60
HP： 0 / 340
MP： 81 / 6014

先谢谢你的热心回答....我那个模块是最新的版本....我现在下你那个文件在试试....

2007/3/30 13:16

工具箱

短消息

PDF

书签

打印

hasj

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

资深会员

注册日期:
2004/12/5 19:34

来自 308627538

所属群组：
注册会员

帖子: 244 | 精华: 5

等级： 14; EXP： 60
HP： 0 / 340
MP： 81 / 6014

现在能正常调用。。。但是图片就是显示不出来。。你那个图片的变量我改了也不行。。。说明下我的是article文章模块，你的是article新闻模块。。
这中间是不是还有什么不同的呢。。。

给上本人的演示网址：
IT技术互助：http://jx912.com/xoops2.015/

2007/3/30 19:25

工具箱

短消息

PDF

书签

打印

superray

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

新进会员

注册日期:
2006/1/15 22:40

所属群组：
注册会员

帖子: 13

等级： 2; EXP： 38
HP： 0 / 34
MP： 4 / 498

引用:

hasj 写道：
现在能正常调用。。。但是图片就是显示不出来。。你那个图片的变量我改了也不行。。。说明下我的是article文章模块，你的是article新闻模块。。
这中间是不是还有什么不同的呢。。。

给上本人的演示网址：
IT技术互助：http://jx912.com/xoops2.015/

你好，访问了你的网站。知道原因了：
老兄，它获取的是图片附件！不是文章中插入的图片，必须编辑文章上传！！！
您上传图片就行了。

2007/3/30 22:16

工具箱

短消息

PDF

书签

打印

hasj

回复: 新浪新闻的幻灯片，代码问题！！！Support Team的

#10

资深会员

注册日期:
2004/12/5 19:34

来自 308627538

所属群组：
注册会员

帖子: 244 | 精华: 5

等级： 14; EXP： 60
HP： 0 / 340
MP： 81 / 6014

引用:

superray 写道：
引用:

hasj 写道：
现在能正常调用。。。但是图片就是显示不出来。。你那个图片的变量我改了也不行。。。说明下我的是article文章模块，你的是article新闻模块。。
这中间是不是还有什么不同的呢。。。

给上本人的演示网址：
IT技术互助：http://jx912.com/xoops2.015/

你好，访问了你的网站。知道原因了：
老兄，它获取的是图片附件！不是文章中插入的图片，必须编辑文章上传！！！
您上传图片就行了。

这个我知道的啦...你看第一个文章....那个里面上传了图片附件....其它的是我用编辑器引用别人的图片...那自然是不能调用的啦...但第一个文章的图片是我自已上传的附件...为什么也是显示不出来呢

2007/3/31 2:16

工具箱

短消息

PDF

书签

打印