请教一个关于循环显示效果的问题 - JavaScript论坛

问题点数：0 回复次数：4

请教一个关于循环显示效果的问题

<html>
    <head>

    </head>
    <body>
        <table>
            <tr>
                <td width="100" height="100">
                    <img src="/images/up.jpg" onmouseover="c.style.backgroundColor='#84d384';c.innerHTML='aaa'" onmouseout="c.style.backgroundColor='';c.innerHTML='login'">
                </td>
                <td width="100" height="100">
                    <img src="/images/down.jpg" onmouseover="c.style.backgroundColor='#ff8a00';c.innerHTML='bbb'" onmouseout="c.style.backgroundColor='';c.innerHTML='login'">
                </td>
            </tr>
            <tr>
                <td colspan="2" height="200" id="c" ></td>
            </tr>
        </table>
    </body>
</html>
现在的情况是mouseover时候显示背景和文字，mouseout时候消失，那有没有办法在mouseout时候改为按顺序循环显示前面4个mouseover的效果呢，并且在进入页面时候这个td内也显示的是mouseout的效果呢，请高手指点下，谢谢。

搜索更多相关主题的帖子: 效果　 innerHTML　style　head　

第 2 楼

得分:0

“按顺序循环显示前面4个mouseover的效果呢”
什么意思？

个人ajax技术专题站： " target="_blank">http://www. 我不会闲你烦，只会闲你不够烦！

第 3 楼

得分:0

就是说当mouseout时候，第二行的td内依次循环显示前面2个image的mouseover效果，javascript能够实现吗？

第 4 楼

得分:0

程序代码：

<html>
    <head>
       <script type="text/javascript">
            var intervalId=null;
            var timeout=1000;
            var currentIdx=0;
            var effects=[
                          {bgColor:'#84d384',text:'aaa'},
                          {bgColor:'#ff8a00',text:'bbb'}
                        ]
            function _start() {
                 effect(currentIdx);
                 currentIdx=(++currentIdx)%effects.length;
            }

            function start() {
                 clear();
                 intervalId=setInterval(_start,timeout);
            }

            function clear() {
                 if (intervalId) clearInterval(intervalId);
            }

            function effect(idx) {
                 var c=document.getElementById('c');
                 c.style.bgColor=effects[idx].bgColor;
                 c.innerHTML=effects[idx].text;
            }

            window.onload=function() {
                 start();
            }
       </script>
    </head>
    <body>
        <table>
            <tr>
                <td width="100" height="100">
                    <img src="/images/up.jpg" onmouseover="clear();effect(0)" onmouseout="start()">
                </td>
                <td width="100" height="100">
                    <img src="/images/down.jpg" onmouseover="clear();effect(1)" onmouseout="start()">
                </td>
            </tr>
            <tr>
                <td colspan="2" height="200" id="c" ></td>
            </tr>
        </table>
    </body>
</html>

个人ajax技术专题站： " target="_blank">http://www. 我不会闲你烦，只会闲你不够烦！

第 5 楼

得分:0

谢谢斑竹的回复，但是个人感觉这样的话以后添加显示内容等相当复杂，如果使用div的display来显示是否可以呢，写法是否和这个差不多呢？