这里有完整的代码，你们可以看到。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Collage</title></head><style> div { background: url("Image/191203174105-edward-whitaker-1-large-169.jpg") ; height: 300px; width: 300px; }</style><body> <div id="div"></div><button id="button">Next</button><script>在这里，我采用了变量im来提供 3 张图像。var im=[ {'img':'Image/191203174105-edward-whitaker-1-large-169.jpg',} ,{'img':'Image/5718897981_10faa45ac3_b-640x624.jpg',}, {'img':'Image/gettyimages-836272842-612x612.jpg',},];var a=document.getElementById('button');var b=document.getElementById('div')a.addEventListener('click',next);因此，根据我的知识，它应该在循环开始但在程序中提供每个图片的链接。我没有得到想要的结果。您能帮我理解为什么会发生这种情况吗？function next() { for(var i=1;i<im.length;i++) { b.style.background=`url(${im[i].img})`; } }</script></body></html>
2 回答
狐的传说
TA贡献1804条经验 获得超3个赞
如果您希望通过单击按钮循环浏览图片，那么您实际上无法使用循环。在您发布的代码中，单击按钮后，它会快速循环浏览所有图片。您需要创建一个计数器，并在每次单击按钮时递增它。
下面的代码片段我也添加到了上一个按钮中，您可以向前和向后循环浏览图片。
const im = {
'img1': 'https://placehold.it/300x150/ff0000/ffffff?text=image_1',
'img2': 'https://placehold.it/300x150/00ff00/ffffff?text=image_2',
'img3': 'https://placehold.it/300x150/0000ff/ffffff?text=image_3',
};
const imgDiv = document.getElementById('imgDiv')
const btnNext = document.getElementById('btnNext');
const btnPrev = document.getElementById('btnPrev');
const totImages = Object.keys(im).length;
let imgNumber = 1;
btnNext.addEventListener('click', next);
btnPrev.addEventListener('click', prev);
function next() {
imgNumber++
let img = imgNumber <= totImages ? `img${imgNumber}` : null;
if (img) imgDiv.style.background = `url(${im[img]})`;
if (imgNumber === totImages) btnNext.disabled = true;
if (imgNumber > 1) btnPrev.disabled = false;
}
function prev() {
imgNumber--
let img = imgNumber >= 0 ? `img${imgNumber}` : null;
if (img) imgDiv.style.background = `url(${im[img]})`;
if (imgNumber < totImages) btnNext.disabled = false;
if (imgNumber === 1) btnPrev.disabled = true;
}
#imgDiv {
background: url("https://placehold.it/300x150/ff0000/ffffff?text=image_1");
height: 150px;
width: 300px;
}
#btnDiv {
width: 300px;
height: auto;
position: relative;
}
#btnPrev {
position: absolute;
left: 0;
top: 0;
}
#btnNext {
position: absolute;
right: 0;
top: 0;
}
<div id="imgDiv"></div>
<div id='btnDiv'>
<button id="btnPrev" disabled>⇽ Prev</button>
<button id="btnNext">Next ⇾</button>
</div>
慕沐林林
TA贡献2016条经验 获得超9个赞
var i = 0;
var im = [{
'img': 'https://picsum.photos/536/354'
},
{
'img': 'https://picsum.photos/id/237/536/354'
},
{
'img': 'https://picsum.photos/seed/picsum/536/354'
}
];
var a = document.getElementById('button');
var b = document.getElementById('div')
a.addEventListener('click', next);
function next() {
console.log(i);
b.style.background = `url(${im[i].img})`;
i++;
if (i == im.length) {
i = 0;
}
}
div {
background: url("https://picsum.photos/id/1084/536/354?grayscale");
height: 300px;
width: 300px;
}
<div id="div"></div>
<button id="button">Next</button>
- 2 回答
- 0 关注
- 85 浏览
添加回答
举报
0/150
提交
取消