CSDN-实现图片轮换

最新推荐文章于 2024-06-06 20:04:13 发布

wangjh422

最新推荐文章于 2024-06-06 20:04:13 发布

阅读量650

点赞数

分类专栏：代码解析文章标签： timer div function class float html

本文链接：https://blog.csdn.net/wangjh422/article/details/2147916

版权

代码解析专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码来自CSDN，仅做学习。

效果：

代码：

<html>
<head>
<style>
body{
text-align:center;
margin:0;
padding:0;
font:normal 12px verdana,sans-serif;;
color:#000;
line-height:150%;
/*background:#435A8E;*/
}
img{border:0;}

/*part1 left*/
.p1leftwrap{float:center;width:297px;border:1px solid #B0B4D7;margin:0 0 6px;}
.p1leftwrap img{padding:8px 8px;}

#NewsPicTxt{padding:3px 0;background:url(newcsdn_pic9.gif) repeat-x;}
#NewsPicTxt a{padding:0 6px;color:#333;text-align:center;text-decoration:none;}
.Nav{float:right;margin:-5px 7px 2px 0;padding:0 0 3px;}
*html .Nav{float:right;margin:-5px 6px 2px 0;padding:0 0 3px;}
.Nav span a{display:block;float:right;background:#000;margin:0 2px 0 0;padding:0 5px;text-decoration:none;color:#FFF;cursor:pointer;}
.Nav span.Normal a{display:block;float:right;background:#000;margin:0 2px 0 0;padding:0 5px;text-decoration:none;color:#FFF;}
.Nav span.Cur a{display:block;float:right;background:#F00;margin:0 2px 0 0;padding:0 5px;text-decoration:none;color:#FFF;}

</style>
<script type="text/javascript">
var isIE=!(navigator.userAgent.indexOf('MSIE')==-1);
var news;
var curNew=0;
var timer;
function init(pic,txt)
{
    if(!pic)pic="NewsPic";
    if(!txt)txt="NewsPicTxt";
var div=document.getElementById(pic);
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:;/" οnclick=/"javascript:curNew="+(i-1)+";change('"+pic+"','"+txt+"');/">"+(i+1)+"</a>";
  if(i==curNew)n.className="Cur";
  nav.appendChild(n);

  news[i].LinkElement=n;
}
div.appendChild(nav);
curNew--;
window.setTimeout("change('"+pic+"','"+txt+"')",3000);

}
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(pic,txt)
{
    var div=document.getElementById(pic);
    var text=document.getElementById(txt);
    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('"+pic+"','"+txt+"')",5000);

}
</script>
</head>
<body>
<div class="p1leftwrap" id="focuspic">
  <div id="NewsPicTxt"></div>
  <div id="NewsPic" style="width:297px;overflow:hidden;">
   <a title="" style="DISPLAY: block; VISIBILITY: visible" href="" target="_blank">
    <img class="Picture" height="180" alt="" src="*.jpg" width="280"/>
   </a>
   <a title="" style="DISPLAY: none; VISIBILITY: hidden" href="" target="_blank">
    <img class="Picture" height="180" alt="" src="*.gif" width="280"/>
   </a>
   <a title="" style="DISPLAY: none; VISIBILITY: hidden" href="" target="_blank">
    <img class="Picture" height="180" alt="" src="*.gif" width="280"/>
   </a>
  </div>
        <script type="text/javascript">
   init();
        </script>
    </div>
</body>
</html>