图像旋转背景 js 跳转到页面顶部

Image rotate background js jumps to top of the page

本文关键字：顶部 旋转 背景 js 图像      更新时间：2023-09-26

我在javascript上遇到了一个我不知道如何解决的问题。首先，我是一个完全的新手。我找到了一个在div 元素中加载随机图像的代码并对其进行了一点调整（原始代码按顺序加载图像 - 我插入了一种随机性算法（非常笨拙，但它以某种方式工作并且很少重复相同的图像一个接一个）。

现在代码工作正常，但是当我滚动到页面底部时，脚本将新图像加载到div 元素浏览器中的瞬间跳转到页面顶部。

如何阻止这种情况发生？请帮助我使用"儿童语言"（因为正如我所说，我是js的新手）。

提前感谢大家的时间！ 

<script src="js_vrt/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
  var images = ['img_vrt/pozadine/1p.jpg', 'img_vrt/pozadine/2p.jpg', 'img_vrt/pozadine/3p.jpg', 'img_vrt/pozadine/4p.jpg'];
  var image = $('#pozad');
  var i = Math.floor((Math.random() * images.length) + 0);
  var ist;
  //Initial Background image setup
  image.css('background-image', 'url(' + images[i++] + ')');
  //Change image at regular intervals
  setInterval(function() {
    image.fadeOut(1500, function() {
      image.css('background-image', 'url(' + images[i++] + ')');
      image.fadeIn(1500);
    });
    if (i == images.length)
      i = Math.floor((Math.random() * (images.length - 1)) + 0);
    else i = Math.floor((Math.random() * (images.length)) + 0);
  }, 5000);
});
</script>

我想出的解决方案：

问题不在 js 代码中。它是HTML结构。

如果有人遇到同样的问题，即加载图像时屏幕跳转到页面顶部，请执行以下操作：

具有不断变化的背景的div 元素必须包含在另一个包装div（具有相同的高度）中。

<div id="wrap_element">
    <div id="div_that_loads_the_images"></div>
</div>
相关文章：