Question

我开发了一个固定的背景，背景的每一面都有一个图像。我想保持背景固定，并且每隔X秒替换侧面图像，并带有缓动效果。

以下就是我所做的

这是HTML：

<div class="container">
  <img src="http://rcb.com.mt/wordpresstesting/testimages/bk-ground.jpg" />
  <img class="element1" src="http://rcb.com.mt/wordpresstesting/testimages/element1.jpg" />
  <img  class="element2" src="http://rcb.com.mt/wordpresstesting/testimages/element2.jpg" />
</div>

这是CSS：

.container{
        position: relative; 
        left: 0; 
        top: 0;
}
.element1{
    position: absolute; 
    top: 80px; 
    left:0px;
}

.element2{
    position: absolute; 
    left:720px;
    top:80px;
    }

这里也可以看到一个小提琴：jsFiddle - 我希望用红色和黄色框替换其他图像。（显然，彩色盒装是出于示例目的 - 这些最终将变为图像）

如果您可以帮助我，或者建议任何图书馆准备用于实现此效果，我将非常感谢您的帮助。动画。

Answer 1

如果您想每隔X秒替换一次图像，请使用

 setInterval(function() {
          // Do something every X seconds, 
        $('.element1').attr("src", 'http://path-to-new-image');
    }, X);

Answer 2

使用Jquery库以轻松的方式显示/隐藏图像，使用setInterval每隔几秒替换一次图像。

代码：

  <!DOCTYPE html>
  <html>
    <head>
      <title></title>
      <style type="text/css">
        .container{
              position: relative; 
              left: 0; 
              top: 0;
             }
        .element1{
          position: absolute; 
          top: 80px; 
          left:0px;
         }
        .element2{
          position: absolute; 
          left:720px;
          top:80px;
         }
      </style>
      <script src="jquery.js"></script>
    </head>
    <body>
     <div class="container">
        <img src="http://rcb.com.mt/wordpresstesting/testimages/bk-ground.jpg" />
        <img class="element1" src="http://rcb.com.mt/wordpresstesting/testimages/element1.jpg" />
        <img  class="element2" src="http://rcb.com.mt/wordpresstesting/testimages/element2.jpg" />
     </div> 
     <script type="text/javascript">
      var url = "http://rcb.com.mt/wordpresstesting/testimages/";
      var limg_array = ['element2.jpg', 'element1.jpg', 'element2.jpg'];
      var rimg_array = ['element1.jpg', 'element2.jpg', 'element1.jpg'];
      var i = 0,
       j = 0;

      function changeImage() {
        if (i == limg_array.length) {
          i = 0;
        }

        if (j == rimg_array.length) {
          j = 0;
        }

        $('.element1').hide();
        $('.element1').attr('src', url + limg_array[i]);
        $('.element1').show("slow");
        i = i + 1;

        $('.element2').hide();
        $('.element2').attr('src', url + rimg_array[j]);
        $('.element2').show("slow");
        j = j + 1;

      }
      window.setInterval(changeImage, 10000);
    </script>
  </body>
</html>

JS小提琴：http://jsfiddle.net/p5uEW/7/

Answer 3

如果您不想改变背景，那么首先修改您的css属性

body
{
background-image: url('location/img.jpg');
background-position: top/right/left/bottom; // choose that you need
}

这样，更改图片时您的课程不会受到影响。

替换固定背景上的图像

3 个答案: