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

月影流星 发表于 2007-12-15 23:50

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

<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的效果呢，请高手指点下，谢谢。

渚薰发表于 2007-12-17 08:42

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

月影流星 发表于 2007-12-17 09:16

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

渚薰发表于 2007-12-17 10:34

[code]<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>[/code]

月影流星 发表于 2007-12-17 10:56

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

页: [1]