Question

我有一个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>

Answer 1

解决方案我想出了：

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

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

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

<div id="wrap_element">
    <div id="div_that_loads_the_images"></div>
</div>

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

1 个答案: