這里有完整的代碼，你們可以看到。<!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 關注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消