如何以编程方式更改 div 内的图片？
这里有完整的代码，你们可以看到。
<!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回答
-
狐的传说
如果您希望通过单击按钮循环浏览图片，那么您实际上无法使用循环。在您发布的代码中，单击按钮后，它会快速循环浏览所有图片。您需要创建一个计数器，并在每次单击按钮时递增它。下面的代码片段我也添加到了上一个按钮中，您可以向前和向后循环浏览图片。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> -
慕沐林林
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>
随时随地看视频慕课网APP
相关分类
Html5