html切换2个背景图片答案

【问题标题】：html toggle 2 background imageshtml切换2个背景图片
【发布时间】：2012-02-29 20:16:44
【问题描述】：

如何在 2 个不同的 .gif 文件之间切换背景图片。

目前我有：

<td style='background:url(image1.gif)'>

但希望它每 1 秒在 image1.gif 和 image2.gif 之间切换一次。

是否需要一些 javascript 或 css 或其他东西？

【问题讨论】：

标签： html image toggle

【解决方案1】：

应该这样做 - http://jsfiddle.net/Jc2Bq/

HTML

<table>
    <tr>
        <td class="bgimage">&nbsp;</td>
    </tr>
</table>

CSS（用你想要的图片替换颜色）

td.bgimage{
     padding: 10px;
     background: #333;
}

td.bgimage.toggled{
     background: #f00;
}

Javascript

function colorChange(){
    setTimeout(function(){
        $('td.bgimage').toggleClass('toggled');
        colorChange();
    }, 1000);
}

colorChange();

【讨论】：

【解决方案2】：

没有 JavaScript，你可以使用 CSS 做一些事情，比如：

td:hover {
 background: url(image2.gif) !important;   
}

这是一个 jsFiddle example 使用颜色而不是图像。

示例 2（针对一个类）：

td.someclass:hover {
 background: url(image2.gif) !important;   
}

【讨论】：

我可以将它设置为一个类而不是'td'吗？

【解决方案3】：

CSS

.bg_one{background:url(image1.gif)}
.bg_two{background:url(image2.gif)}

HTML

<td class='bg1'></td>

Javascript(jquery)

setInterval(function(){
    if($('td').hasClass('bg_one'))
       $('td').toggleClass('bg_two');
    else
       $('td').toggleClass('bg_one');  
}, 1000);

【讨论】：

【解决方案4】：

这是一个没有 jquery 的简单方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
  <title>Sample</title>

  <style type="text/css" id="vbulletin_css">
    #cell {      
      width: 200px;
      height: 200px;
      background: url('image1.gif');
    }
  </style>


  <script type="text/javascript">

  // start by setting current background image flag
  var currentImage = 1;

  function init() {
    // start calling function 'changeImage' every second
    setInterval(changeImage,1000);    
  }

  function changeImage() {
    if (currentImage == 1) {
      // set background image to image2      
      document.getElementById('cell').style.background = "url('image2.gif')";
      currentImage = 2;
    }
    else {
      document.getElementById('cell').style.background = "url('image1.gif')";
      currentImage = 1;
    }
  }

  window.onload = init;  

  </script>

  </head>
  <body>
    <table>
      <tr>
        <td id="cell"></td>
      </tr>
    </table>
  </body>
</html>

【讨论】：

【解决方案5】：

我认为您需要通过 setTimeout() 函数 (reference here) 使用 JavaScript。

【讨论】：