Question

我正在尝试仅使用HTML，CSS和JS创建轮播。

它可以工作，但不如我所希望的那样。

完成一轮图像处理后，大约需要8秒钟才能开始显示从第一张到最后一张的图像，然后又停止几秒钟，依此类推...

此外，包含背景图像的div的宽度为100％，高度为100vh。我尝试设置bg-repeat，bg-size，bg-position之类的背景属性，但是我无法设法使图像在屏幕上很好地显示-当图像被裁剪时设置background-size: cover，如果我设置background-size: contain;或其他属性，该值会变得太小。

能否请您查看此“工作”演示？谢谢。

var divi = document.querySelector(".divi");
srcArr = ["https://picsum.photos/id/237/200/300", "https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"];
var iter = 0;

setInterval(function() {
  if (iter == (srcArr.length)) {
    iter = 0;
  } else {
    divi.style.backgroundImage = "url('" + srcArr[iter] + "')";
    iter++;
  }
}, 4000);

* {
  padding: 0;
  margin: 0
}

.divi {
  width: 100%;
  height: 100vh;
  background-image: url("https://picsum.photos/id/240/200/300");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

<div class="divi"></div>

Answer 1

正如 Tyler Roper 所说，当（iter == srcArr.length）重复为零值但未更改图像时，因此对于下一个，它们要再等待4秒。 >

['Frank', 'Howdy!', 3]
[['John', [[1, 'Hello!'], [2, 'Hi!'], [3, 'Howdy!']]], ['Sally', [[1, 'Hello!'], [2, 'Hi!'], [3, 'Howdy!']]], ['Frank', [[1, 'Hello!'], [2, 'Hi!']]]]
['John', 'Hello!', 1]
[['John', [[2, 'Hi!'], [3, 'Howdy!']]], ['Sally', [[1, 'Hello!'], [2, 'Hi!'], [3, 'Howdy!']]], ['Frank', [[1, 'Hello!'], [2, 'Hi!']]]]
['Sally', 'Howdy!', 3]
[['John', [[2, 'Hi!'], [3, 'Howdy!']]], ['Sally', [[1, 'Hello!'], [2, 'Hi!']]], ['Frank', [[1, 'Hello!'], [2, 'Hi!']]]]
['John', 'Howdy!', 3]
[['John', [[2, 'Hi!']]], ['Sally', [[1, 'Hello!'], [2, 'Hi!']]], ['Frank', [[1, 'Hello!'], [2, 'Hi!']]]]
['John', 'Hi!', 2]
[['John', []], ['Sally', [[1, 'Hello!'], [2, 'Hi!']]], ['Frank', [[1, 'Hello!'], [2, 'Hi!']]]]
['Sally', 'Hello!', 1]
[['John', []], ['Sally', [[2, 'Hi!']]], ['Frank', [[1, 'Hello!'], [2, 'Hi!']]]]
['Sally', 'Hi!', 2]
[['John', []], ['Sally', []], ['Frank', [[1, 'Hello!'], [2, 'Hi!']]]]
['Frank', 'Hi!', 2]
[['John', []], ['Sally', []], ['Frank', [[1, 'Hello!']]]]
['Frank', 'Hello!', 1]
[['John', []], ['Sally', []], ['Frank', []]]

const
  divi   = document.querySelector(".divi"),
  srcArr = ["https://picsum.photos/id/237/200/300", "https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"];
var iter = -1;

setInterval(function() {
  iter = (iter + 1) % srcArr.length;
  divi.style.backgroundImage = "url('" + srcArr[iter] + "')";
}, 4000);

* {
  padding: 0;
  margin: 0
}

.divi {
  width: 100%;
  height: 100vh;
  background-image: url("https://picsum.photos/id/240/200/300");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

Answer 2

每隔四秒钟，您运行一次if语句，并且只有在其结果为false时，您才更改图像。这意味着每次其求值为true（到达数组末尾）时，都必须经过两次迭代才能继续（在这种情况下，需要8秒）

我个人更喜欢将类似的内容放入函数中，并在setTimeout上使用重复出现的setInterval。如果您想在某个时间停止幻灯片放映，我也会返回该超时。

关于您的背景，这是一个相当广泛的问题。首先，我刚刚应用了background-position: center;。

const divi = document.querySelector(".divi");
const srcArr = ["https://picsum.photos/id/237/200/300","https://picsum.photos/id/238/200/300","https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"];
const timer = 1000;

const nextImg = (imageArray, index) => {
  divi.style.backgroundImage = `url('${imageArray[index]}')`;
  index = ++index % imageArray.length;
  return setTimeout(()=>nextImg(imageArray, index), timer);
};

const startSlideshow = imageArray => nextImg(imageArray,0); 

//Start slideshow
const slideshow = startSlideshow(srcArr);

//Stop slideshow
//clearTimeout(slideshow);

* {
  padding: 0;
  margin: 0
}

.divi {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}

<div class="divi"></div>

使用html CSS和javascript创建轮播时出现问题

2 个答案: