问题描述
我有一个自己创建的旋转木马,我想知道如何使用 JS 做到这一点。我知道如何通过 CSS 做到这一点,但问题是照片的变化。为什么要更改 src 所以这是我的问题。如果有人知道我如何在 JS 中做到这一点,那就没问题了。也许改变课程或其他什么。
let imagenEnsaladas = document.getElementById("photosEnsaladas");
let buttonNext = document.getElementById("nextPhoto");
let carruselLi = document.getElementById("carruselLista").getElementsByTagName("li");
let positionCarrusel = 0;
let carruselPhotos = [
"assets/carrusel/ens.-ventresca-300-x300-300x300.png","assets/carrusel/ensalada bacalao200x200.png","assets/carrusel/ensalada-alcachofas-300x-300-300x300.jpg","assets/carrusel/ENsalada-yemas-300x300.png","assets/carrusel/ensalada-de-queso-cabra300x300-300x300.png",];
window.onload = function playFoto() {
carruselLi[positionCarrusel].style.backgroundColor = "red";
if (positionCarrusel >= carruselPhotos.length) {
positionCarruseL++;
} else if (positionCarrusel > carruselPhotos.length) {}
imagenEnsaladas.src = carruselPhotos[positionCarrusel];
buttonNext.addEventListener("click",clickNextFoto);
function clickNextFoto() {
if (positionCarrusel >= carruselPhotos.length - 1) {
positionCarrusel = 0;
} else {
positionCarruseL++;
console.log(positionCarrusel);
}
imagenEnsaladas.src = carruselPhotos[positionCarrusel];
for (let i = 0; i < carruselLi.length; i++) {
if (i === positionCarrusel) {
carruselLi[positionCarrusel].style.backgroundColor = "red";
} else {
carruselLi[i].style.backgroundColor = "#1a1d20";
}
}
}
};
.textoNovedades {
margin: 0% 5% 0% 5%;
line-height: 30px;
}
.tablaNovedadesEnsalada {
display: flex;
flex-direction: row-reverse;
background: #1a1d20;
color: rgb(246,225,185);
justify-content: center;
align-items: center;
padding: 2% 2% 2% 2%;
width: 100%;
}
.carruselEnsaladas {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nextPhoto {
background-image: url(assets/carrusel/siguiente.jpg);
background-size: auto;
background-position-x: 54%;
border-radius: 12px;
background-position-y: 47%;
width: 60%;
height: 9vh;
margin: 7%;
border: 3px;
Box-shadow: 3px 3px 3px #999;
}
.tablaNovedadesEnsalada ul {
list-style: none;
}
<section class="tablaNovedadesEnsalada">
<div class="carruselEnsaladas">
<img src="" alt="photos carrusel" id="photosEnsaladas" class="photosEnsaladas">
<button id="nextPhoto" class="nextPhoto">
</button>
</div>
<p class="textoNovedades">
<ul id="carruselLista">
<li value="0"> ensalada de laminas de bacalao</li>
<li value="1"> Ensalada de alcachofas</li>
<li value="2"> Ensalada de yemas</li>
<li value="3">ensalada de ventresca</li>
<li value="4">Ensalada queso cabra</li>
</ul>
</p>
</section>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)