图片处理

Question

我想把一组图片自动一个一个显示，并且显示的时候下面同时可显示该图片的标题，点击标题或图片链接到某一页，有没有什么控件可以啊？？

Answer 1

    <div style="display: block; font-size: 13px; font-weight:bold; width: 100%;height: 20px; line-height: 20px; border-bottom: #0a5191 5px solid;
        color:#0a5191; background-image:url('images/newIcon.gif'); background-repeat:no-repeat; text-indent:30px; margin-top:10px;">
        产品预览</div> 
        <table cellpadding="0" cellspacing="0" style="margin:5px auto;width:570px; height:155px; background-color:rgb(240,240,240);" >
            <tr style="vertical-align:top;">
                <td style="width: 330px">
                    <img id="PicNews" src="" onclick="GoUrl()" style="width:325px; height:150px;cursor:pointer; border:solid 3px rgb(237,237,237);"/> 
                    <span id="pager"></span>
                </td>
                <td style="width: 220px">
                    <span onclick="GoUrl()"  style="display:block; width:220px; line-height:17px; margin:0 auto;height:170px;word-wrap:break-word; overflow:hidden; cursor:pointer;">
                        <span id="ctl00_MainHolder_PicNewsCon" style="display:inline-block;width:220px;"></span>
                    </span></td>
            </tr>
        </table>
    </div>    <script type="text/javascript">
    var Pic= new Array(4);
    var Brief=new Array(4);
    var Url=new Array(4);
    var Title=new Array(4);
    var Pager=document.getElementById("pager");
    Pager.innerHTML="";
    
        Pic[0]='20090830012516_4.jpg'
        Brief[0]='并成为美国UGS公司的全球最佳合作伙伴之一。'
        Url[0]='http://www.baidu.com//'
        Title[0]='cp4'
        Pager.innerHTML+='<div id="PicPager0" style="float:left; width:20px; height:20p; border:solid 1px #cfcfcf;text-align:center;cursor:pointer;" onclick=SetPage(0)>1</div>'
    
        Pic[1]='20090830012508_3.jpg'
        Brief[1]='合作伙伴之一。'
        Url[1]='http://www.baidu.com//'
        Title[1]='cp3'
        Pager.innerHTML+='<div id="PicPager1" style="float:left; width:20px; height:20p; border:solid 1px #cfcfcf;text-align:center;cursor:pointer;" onclick=SetPage(1)>2</div>'
    
        Pic[2]='20090830012501_2.jpg'
        Brief[2]='UGS公司的全球最佳合作伙伴之一。'
        Url[2]='http://www.baidu.com//'
        Title[2]='cp2'
        Pager.innerHTML+='<div id="PicPager2" style="float:left; width:20px; height:20p; border:solid 1px #cfcfcf;text-align:center;cursor:pointer;" onclick=SetPage(2)>3</div>'
    
        Pic[3]='20090830012450_1.jpg'
        Brief[3]='全球最佳合作伙伴之一。'
        Url[3]='http://www.baidu.com'
        Title[3]='cp1'
        Pager.innerHTML+='<div id="PicPager3" style="float:left; width:20px; height:20p; border:solid 1px #cfcfcf;text-align:center;cursor:pointer;" onclick=SetPage(3)>4</div>'
    
    var Index=0;
    function SetLoop()
    {
        SetPic();
        setTimeout("SetLoop()",3000);
    }
    function SetPic()
    {
        var PicImg=document.getElementById("PicNews");
        PicImg.src="upfiles/Link/"+Pic[Index];
        PicImg.alt=Title[Index];
        document.getElementById("ctl00_MainHolder_PicNewsCon").innerHTML=Brief[Index];
        for(var i=0;i<Pic.length;i++)
        {
            var PicPager=document.getElementById("PicPager"+i);
            if(i==Index)
                PicPager.style.color="red";
            else
                PicPager.style.color="black";
        }
        Index=(++Index)%4;
    }
    function SetPage(i)
    {   
        Index=i;
        SetPic();
    }
    function GoUrl()
    {
        window.open(Url[Index],"_blank");
    }
    window.onload=function()
    {
        SetLoop();
    }
    
    </script>