Javascript 在固定背景上替换图像_Javascript_Jquery_Html_Css

Javascript 在固定背景上替换图像

javascript jquery html css

Javascript 在固定背景上替换图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我开发了一个固定的背景，背景的每一面都有一个图像。我想保持背景固定，每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/te

我开发了一个固定的背景，背景的每一面都有一个图像。我想保持背景固定，每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>

这里还可以看到一把小提琴：-我想用其他图像替换红色和黄色框。（显然，彩色方框只是为了举例——最终会变成图像）

如果您能在这方面帮助我，或者建议任何可用于实现此效果和动画的库，我将非常感谢您的帮助。

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

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

如果你不想改变背景，那么从修改css属性开始

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

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

轻松使用Jquery库显示/隐藏图像，并设置每隔几秒替换图像的间隔

代码：


.集装箱{
位置：相对位置；
左：0；
排名：0；
}
.要素1{
位置：绝对位置；
顶部：80px；
左：0px；
}
.要素2{
位置：绝对位置；
左：720px；
顶部：80px；
}
变量url=”http://rcb.com.mt/wordpresstesting/testimages/";
var limg_数组=['element2.jpg'，'element1.jpg'，'element2.jpg']；
var rimg_数组=['element1.jpg'，'element2.jpg'，'element1.jpg']；
var i=0，
j=0；
函数changeImage（）{
if（i==limg_array.length）{
i=0；
}
if（j==rimg_array.length）{
j=0；
}
$（'.element1'）.hide（）；
$（'.element1'）.attr（'src'，url+limg_数组[i]）；
$（'.element1'）.show（“慢”）；
i=i+1；
$（'.element2'）.hide（）；
$（'.element2'）.attr（'src'，url+rimg_数组[j]）；
$（'.element2'）.show（“慢”）；
j=j+1；
}
设置间隔（changeImage，10000）；

JS Fiddle:

我如何将其与我的div的tho联系起来？你可以在setinterval方法中更改图像的来源不幸的是，我在这方面从未有过任何经验，如果你不介意的话，请你提供一个关于我的小提琴的示例。检查小提琴，你可以在一秒钟后看到图像被重新放置感谢，我怎样才能使它循环不断地改变，图像的改变是一种缓和的效果，而不是一种硬性的效果。我在哪里可以找到显示不同缓和类型的文档？

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

  <!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>