Auto Rotate webpart

需求:

    老板需要一个webpart来轮转自动显示内容, 其实很多大形的门户网站首页都有这样的效果, 可以参考msn.com.

分析:

    如果是用纯html做的话, 基本上都是使用div的形式了, 然后使用display :none 之类的. webpart倒并不是很复杂, 主要需要写一些参数属性之类的,

实现:  

   贴出主要的html代码:

<table id="outTable" border="0" cellpadding="0" cellspacing="0" class="focusStyle">
    <tr>
        <td>
             <div id="focusDiv1" style="display:block ;" class="picture">
                    Test Page1 
             </div>
             <div id="focusDiv2" style="display: none ;">
                 <div class="picture"> 
                    <table id="InnerTable" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr valign="top">
                            <td><img src="http://stb.msn.com/i/6A/FC9CEDF6C2E74EB1FA1A2FEFEF58B.jpg" border="0" alt="MSN" /></td>
                            <td><br /><font style="line-height:18px;">Test Page2</font></td>
                        </tr>
                    </table>
                 </div>
             </div>
             <div id="focusDiv3" style="display: none ;">
                 <div class="picture"> 
                    <img src="http://stb.msn.com/i/71/8F2319C8B078A0FA661BB73B641965.jpg" border="0" align="MSN" /> 
                 </div>
             </div>
             <div id="focusDiv4" style="display: none ;">
                <div class="picture"> 
                    <img src="6C17EC24765DB67BA4B3E6AE0C2A9.jpg" border="0" alt="MSN"/>
                </div>
             </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="navigation" id="focusDiv1nav" style="display: block;">
                <ul>
                    <li><a href="javascript:SetFocus(4);" ><&nbsp;Previous</a></li>
                    <li><a href="javascript:SetFocus(2);" >Next&nbsp;></a></li>
                </ul>
             </div>
             <div class="navigation" id="focusDiv2nav" style="display: none;">
                <ul>
                    <li><a href="javascript:SetFocus(1);" ><&nbsp;Previous</a></li>
                    <li><a href="javascript:SetFocus(3);" >Next&nbsp;></a></li>
                </ul>
             </div>    
             <div class="navigation" id="focusDiv3nav" style="display: none;">
                <ul>
                    <li><a href="javascript:SetFocus(2);" ><&nbsp;Previous</a></li>
                    <li><a href="javascript:SetFocus(4);" >Next&nbsp;></a></li>
                </ul>
             </div>    
             <div class="navigation" id="focusDiv4nav" style="display: none;">
                <ul>
                    <li><a href="javascript:SetFocus(3);" ><&nbsp;Previous</a></li>
                    <li><a href="javascript:SetFocus(1);" >Next&nbsp;></a></li>
                </ul>
             </div>            
        </td>
    </tr>
</table>

 
Js:

<script language="JavaScript" type="text/javascript">
    var numDiv;
    numDiv = 1;
    setTimeout('SwitchDiv()',6000);
    function SwitchDiv()
    {
        if( numDiv > 4 ) numDiv = 1
        setTimeout('SetFocus(' + numDiv + ')',6000);
        numDiv++;
        tt = setTimeout('SwitchDiv()',6000);
    }
    function SetFocus(i)
    {
        SelectLayer(i);
    }
    function SelectLayer(i)
    {
         switch(i)
         {
             case 1:
                 document.getElementById("focusDiv1").style.display="block";
                 document.getElementById("focusDiv2").style.display="none";
                 document.getElementById("focusDiv3").style.display="none";
                 document.getElementById("focusDiv4").style.display="none";
                 document.getElementById("focusDiv1nav").style.display="block";
                 document.getElementById("focusDiv2nav").style.display="none";
                 document.getElementById("focusDiv3nav").style.display="none";
                 document.getElementById("focusDiv4nav").style.display="none";
             break;
             case 2:
                 document.getElementById("focusDiv1").style.display="none";
                 document.getElementById("focusDiv2").style.display="block";
                 document.getElementById("focusDiv3").style.display="none";
                 document.getElementById("focusDiv4").style.display="none";
                 document.getElementById("focusDiv1nav").style.display="none";
                 document.getElementById("focusDiv2nav").style.display="block";
                 document.getElementById("focusDiv3nav").style.display="none";
                 document.getElementById("focusDiv4nav").style.display="none";
             break;
             case 3:
                 document.getElementById("focusDiv1").style.display="none";
                 document.getElementById("focusDiv2").style.display="none";
                 document.getElementById("focusDiv3").style.display="block";
                 document.getElementById("focusDiv4").style.display="none";
                 document.getElementById("focusDiv1nav").style.display="none";
                 document.getElementById("focusDiv2nav").style.display="none";
                 document.getElementById("focusDiv3nav").style.display="block";
                 document.getElementById("focusDiv4nav").style.display="none";
             break;
             case 4:
                 document.getElementById("focusDiv1").style.display="none";
                 document.getElementById("focusDiv2").style.display="none";
                 document.getElementById("focusDiv3").style.display="none";
                 document.getElementById("focusDiv4").style.display="block";
                 document.getElementById("focusDiv1nav").style.display="none";
                 document.getElementById("focusDiv2nav").style.display="none";
                 document.getElementById("focusDiv3nav").style.display="none";
                 document.getElementById("focusDiv4nav").style.display="block";
             break;
         }
    }
</script>

CSS

<style type="text/css">
<!--
.focusStyle
{}{
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    color:#07519A;
    width: 360px;
    height: 180px;
    margin: 0px auto;
    margin-bottom:20px;
    border:1px solid #AACCEE;
    background-color: #FFFFFF
}
.focusStyle .picture
{}{

    height:156px;
    margin-top:1px;
    margin-left:1px;
}
.Note
{}{
    Text-indent:20px;
    Line-height:50px;
}
.focusStyle .navigation
{}{
    margin: 1px;
    background-color: #EBF3FB;
    height: 24px;
}

.focusStyle .navigation ul
{}{
    float:left;
    width:360px;
}

.focusStyle .navigation li
{}{
    float:left;
    width:180px;
    display:block;
    color:#07519A;
    list-style-type:none;
    padding-top:5px;
}

.focusStyle .navigation li a
{}{
    color:#07519A;
}

.focusStyle .navigation li a:visited
{}{
    color:#009900;
}

.focusStyle .navigation li a:hover
{}{
    color: #07519A;
}
-->
</style>

WebPart
  里面有些图片, 文字等参数, 因公司内的东西, 不能贴出代码.

最后的效果如下: