首页 新闻 会员 周边 捐助

js为什么对第二个table里的图片不能实现图片轮换

0
悬赏园豆：100 [待解决问题]

以下是效果图

纯JS实现的skype中文6屏焦点图片切换效果 - 分享JavaScript-www.websbook.com

 



样_样的主页 样_样 | 初学一级 | 园豆：39
提问于：2012-06-30 18:52
< >
分享
所有回答(3)
0

都不知道你的js长什么样子！！发几个美女，又无法看到本质的东西（code），谁知道你代码哪个地方出问题了呢！！

Angkor--:-- | 园豆：1086 (小虾三级) | 2012-06-30 19:22

js放在了html源码中呀

支持(0) 反对(0) 样_样 | 园豆：39 (初学一级) | 2012-06-30 19:24

@样_样:  大侠，“html源码” 这个，我怎么才看到呢？？在哪里？？

支持(0) 反对(0) Angkor--:-- | 园豆：1086 (小虾三级) | 2012-06-30 19:57

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯JS实现的skype中文6屏焦点图片切换效果 - 分享JavaScript-www.websbook.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.websbook.com/" />
<meta name="description" content="纯JS实现的skype中文6屏焦点图片切换效果,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />

<style type="text/css">
/* 懒人图库 搜集整理 www.lanrentuku.com */
#NewsPic {    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 368px; PADDING-TOP: 0px; POSITION: relative; TOP: 0px; HEIGHT: 300px; BORDER-RIGHT-WIDTH: 0px}
#NewsPicTxt {    BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; PADDING-BOTTOM: 0px; MARGIN: 3px auto 0px; WIDTH: 365px; COLOR: black; PADDING-TOP: 0px; FONT-FAMILY: Sans-Serif; POSITION: relative; HEIGHT: 0px; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 1px}
#NewsPicTxt A {    COLOR: black; TEXT-DECORATION: none}
#NewsPicTxt A:hover {    COLOR: black; TEXT-DECORATION: none}
#NewsPicTxt A:visited {    COLOR: black; TEXT-DECORATION: none}
#NewPicTxt A:link {    COLOR: black; TEXT-DECORATION: none}
#NewsPicTxt A:hover {    COLOR: red}
#NewsPic A {    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none}
#NewsPic A:hover {    TEXT-DECORATION: none}
#NewPic A:visited {    TEXT-DECORATION: none}
#NewsPic .Picture {    BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; LEFT: 0px; BORDER-LEFT: #ffffff 1px solid; WIDTH: 100%; BORDER-BOTTOM: #ffffff 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 100%}
#NewsPic .Nav {    RIGHT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 12px}
#NewsPic .Nav SPAN {    DISPLAY: block; BACKGROUND: #000000; FLOAT: right; FONT: 10px Courier; BORDER-LEFT: #ffffff 1px solid; WIDTH: 24px; CURSOR: hand; COLOR: #ffffff; HEIGHT: 100%; TEXT-ALIGN: center}
#NewsPic .Nav SPAN.Cur {    BACKGROUND: #019fe8; COLOR: white}
#NewsPic .Nav SPAN.Normal {    BACKGROUND: #000000; FILTER: Alpha(opacity=50); COLOR: white; opacity: .5}
#NewsPic .Nav SPAN A {    DISPLAY: block; WIDTH: 100%; COLOR: white; POSITION: relative; HEIGHT: 100%}
#NewsPic .Nav SPAN A:hover {    CURSOR: hand}



</style>
<script>
var isIE=!(navigator.userAgent.indexOf('MSIE')==-1);
var news;
var curNew=0;
var timer;
function init()        //初始化所有标签内容
{
    var div=document.getElementById("NewsPic");
    if(!div)return;
    var nav=document.createElement("DIV");
    nav.className="Nav";
    var nodes;
    if(isIE)
    {
        nodes=div.childNodes;
    }
    else
    {
        nodes=childrenNodes(div.childNodes);
    }
    news=new Array(nodes.length);
    for(var i=nodes.length-1;i>=0;i--)
    {
        var element=nodes[i];
        
        
        news[i]={};
        news[i].Element=element;
        news[i].Text=element.getAttribute("title");
        news[i].Url=element.getAttribute("href");
        
        var n=document.createElement("span");
        n.innerHTML="<a herf=\"javascript:;\" onclick=\"javascript:curNew="+(i-1)+";change();\">"+(i+1)+"</a>";
        if(i==curNew)n.className="Cur";
        nav.appendChild(n);
        
        news[i].LinkElement=n;
    }
    div.appendChild(nav);
    curNew--;
    change();
}
function childrenNodes(node)
{
    var c=new Array();
    for(var i=0;i<node.length;i++)
    {
        if(node[i].nodeName.toLowerCase()=="a")
            c.push(node[i]);
    }
    return c;
}
function change()
{
    var div=document.getElementById("NewsPic");
    var text=document.getElementById("NewsPicTxt");
    if(!div)return;
    curNew=curNew+1;
    if(curNew>=news.length)curNew=0;
    for(var i=0;i<news.length;i++)
    {
        if(i==curNew)
        {
            news[i].Element.style.display="block";
            news[i].Element.style.visibility="visible";
            news[i].LinkElement.className="Cur";
            text.innerHTML="<a href=\""+news[i].Url+"\" title=\""+news[i].Text+"\" target=\"_blank\">"+news[i].Text+"</a>";
        }
        else
        {
            news[i].Element.style.visibility="hidden";
            news[i].Element.style.display="none";
            news[i].LinkElement.className="Normal";
        }
    }
    if(timer)window.clearTimeout(timer);
    timer=window.setTimeout("change()",3000);
    
}


</script>

<BODY>
<br>
<table width="368" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="368">
    <DIV class="auto_2_left_1_2" style="MARGIN-TOP: 6px; WIDTH: 365px; HEIGHT: 300px">
    <SPAN id=focuspic><DIV id=NewsPic>
    <A title=www.websbook.com href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/01.jpg"></A><A title=www.websbook.com href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/02.jpg"></A><A title=www.websbook.com style="DISPLAY: none" href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/03.jpg"></A><A title=www.websbook.com style="DISPLAY: none; VISIBILITY: hidden" href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/04.jpg"></A><A title=懒人图库 style="DISPLAY: none; VISIBILITY: hidden" href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/05.jpg"></A><A title=www.websbook.com style="DISPLAY: none; VISIBILITY: hidden" href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/06.jpg"></A><DIV id=NewsPicTxt style="DISPLAY: none; VISIBILITY: hidden"></DIV></SPAN>
<SCRIPT language=javascript>init();</SCRIPT>
</DIV></td>
  </tr>

</table>
<br><br>
<br>

<table width="368" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="368">
    <DIV class="auto_2_left_1_2" style="MARGIN-TOP: 6px; WIDTH: 365px; HEIGHT: 300px">
    <SPAN id=focuspic><DIV id=NewsPic>
    <A title=www.websbook.com href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/01.jpg"></A><A title=www.websbook.com href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/02.jpg"></A><A title=www.websbook.com style="DISPLAY: none" href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/03.jpg"></A><A title=www.websbook.com style="DISPLAY: none; VISIBILITY: hidden" href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/04.jpg"></A><A title=懒人图库 style="DISPLAY: none; VISIBILITY: hidden" href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/05.jpg"></A><A title=www.websbook.com style="DISPLAY: none; VISIBILITY: hidden" href="http://www.websbook.com/" target=_blank><IMG class="Picture" src="images/06.jpg"></A><DIV id=NewsPicTxt style="DISPLAY: none; VISIBILITY: hidden"></DIV></SPAN>
<SCRIPT language=javascript>init();</SCRIPT>
</DIV></td>
  </tr>

</table>
<br><br>
</body>
</html>

支持(0) 反对(0) 样_样 | 园豆：39 (初学一级) | 2012-06-30 20:12

@样_样: firebug一下

支持(0) 反对(0) Angkor--:-- | 园豆：1086 (小虾三级) | 2012-06-30 20:21

@Angkor: ？？就是图片我没有上传，你能放几张图片在img文件夹里测一下效果。

支持(0) 反对(0) 样_样 | 园豆：39 (初学一级) | 2012-06-30 20:38
0

原因是调用document.getElementById的方法时，如果页面上有多个相同名称的ID，它只会获取第一个元素，所以第二个被忽略了。

建议你重新封装下函数，并且用 不同ID来调用即可

Nanedo | 园豆：224 (菜鸟二级) | 2012-07-17 22:05
0

还是用JQuery方便一点，把ID换成一个类属性，然后用类选择器去进行遍历或者筛选，有多个相同ID，只会取到第一个ID的元素

ljcheibao | 园豆：132 (初学一级) | 2012-12-04 09:51
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。