图片自动展示功能

昨天一个朋友忽然问我有没有做过想迅雷主页上的一个图片展示一样的功能,于是打开看了下,其实就是图片能够自动翻页显示,当然手动翻页也可以的.

想想这个功能应该挺简单的,无非是个客户端脚本控制页面有序进行显示和隐藏,无奈朋友没有做过网页脚本等这方面的东西,于是我从QQ主页上下载了该页面的整个源码,用vs2005打开看了下,马上就发现了这些代码.

效果如下:

大栅栏步行街正式开街

刘翔郭晶晶蜡像换上奥运装

安徽芜湖集中销毁百余赌博游戏机

1

2

3

源码为昨天(2008-07-30)QQ空间上获取,本人无拥有该代码权利,如下:

<p><table cellspacing="0" cellpadding="0" width="312" align="center" border="0">
    <tr>
            <td width="312">
            <div id="fc" style="filter: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 ); width: 310px; height: 210px">
            <div style="display: block"><a href="http://news.qq.com/a/20080730/002785.htm" target="_blank"><img onmouseover="clearAuto();" onmouseout="setAuto()" height="210" src="http://images.cnblogs.com/cnblogs_com/pengyq/119138/r_11983843.jpg" width="310" border="0"></a></div>
            <div style="display: none"><a href="http://news.qq.com/a/20080730/001267.htm" target="_blank"><img onmouseover="clearAuto();" onmouseout="setAuto()" height="210" src="http://images.cnblogs.com/cnblogs_com/pengyq/119138/r_11971320.jpg" width="310" border="0"></a></div>
            <div style="display: none"><a href="http://www.cnblogs.com/pengyq/admin/Files/11969693.jpg" target="_blank"><img onmouseover="clearAuto();" onmouseout="setAuto()" height="210" src="http://images.cnblogs.com/cnblogs_com/pengyq/119138/r_11969693.jpg" width="310" border="0"></a></div>
            </div>
            </td>
        </tr>
        <tr>
            <td background="Files/newsb-01.gif" height="26">
            <table cellspacing="0" cellpadding="0" width="310" align="center" border="0">
                <tr>
                        <td onmouseover="clearAuto();" onmouseout="setAuto()" align="center" width="253">
                        <div id="con">
                        <div style="display: block"><a class="bla" href="http://news.qq.com/a/20080730/002785.htm" target="_blank">大栅栏步行街正式开街</a></div>
                        <div style="display: none"><a class="bla" href="http://news.qq.com/a/20080730/001267.htm" target="_blank">刘翔郭晶晶蜡像换上奥运装</a></div>
                        <div style="display: none"><a class="bla" href="http://news.qq.com/a/20080730/000965.htm" target="_blank">安徽芜湖集中销毁百余赌博游戏机</a></div>
                        </div>
                        </td>
                        <td width="57">
                        <table class="lhn" id="num" cellspacing="3" cellpadding="0" align="center" border="0">
                            <tr>
                                    <td class="bigon" onmouseover="clearAuto();" style="cursor: pointer" onclick="Mea(0);" onmouseout="setAuto()" align="center" width="14" background="" height="18">1</td>
                                    <td class="bigoff" onmouseover="clearAuto();" style="width: 14px; cursor: pointer" onclick="Mea(1);" onmouseout="setAuto()" align="center" background="">2</td>
                                    <td class="bigoff" onmouseover="clearAuto();" style="width: 14px; cursor: pointer" onclick="Mea(2);" onmouseout="setAuto()" align="center" background="">3</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
<script> 
    
var n=0;
var showNum = document.getElementById("num");
function Mea(value)
{
 n=value;
 setBg(value);
 plays(value);
 cons(value);
}
 
function setBg(value)
{
    for(var i=0;i<3;i++)
    if(value==i)
  showNum.getElementsByTagName("td")[i].className='bigon';
   
 else 
  showNum.getElementsByTagName("td")[i].className='bigoff';    
} 
function plays(value)
{
 try
 {
  with (fc)
  {
   filters[0].Apply();
   for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 
   filters[0].play(); 
  }
 }
 catch(e)
 {
  var divlist = document.getElementById("fc").getElementsByTagName("div");
  for(i=0;i<3;i++)
  {
   i==value?divlist[i].style.display="block":divlist[i].style.display="none";
  }
 }
}
function cons(value)
{
 try
 {
  with (con)
  {
    for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none";   
  }
 }
 catch(e)
 {
  var divlist = document.getElementById("con").getElementsByTagName("div");
  for(i=0;i<3;i++)
  {
   i==value?divlist[i].style.display="block":divlist[i].style.display="none";
  }  
 }
}
function clearAuto()
{
    clearInterval(autoStart);
}
function setAuto()
{
    autoStart=setInterval("auto(n)", 5000);
}
function auto()
{
 n++;
 if(n>2)n=0;
 Mea(n);
}
function sub()
{
 n--;
 if(n<0)n=2;
 Mea(n);
} 
setAuto(); 
    </script>
</p>

源码也比较好理解,用三个div分别显示3个图片,每次只能显示一个图片,同时下面的显示连接和数字也同样显示,全部由脚本控制.

这次也同样给了我一些启示,一些功能可以直接从现有的网站源码提取,虽然自己做也是能够实现,但既有之,则用之,节省时间哇.