猿问

如何以编程方式更改 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>


冉冉说
浏览 86回答 2
2回答

狐的传说

如果您希望通过单击按钮循环浏览图片，那么您实际上无法使用循环。在您发布的代码中，单击按钮后，它会快速循环浏览所有图片。您需要创建一个计数器，并在每次单击按钮时递增它。下面的代码片段我也添加到了上一个按钮中，您可以向前和向后循环浏览图片。const im = {&nbsp; 'img1': 'https://placehold.it/300x150/ff0000/ffffff?text=image_1',&nbsp; 'img2': 'https://placehold.it/300x150/00ff00/ffffff?text=image_2',&nbsp; '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() {&nbsp; imgNumber++&nbsp; let img = imgNumber <= totImages ? `img${imgNumber}` : null;&nbsp; if (img) imgDiv.style.background = `url(${im[img]})`;&nbsp; if (imgNumber === totImages) btnNext.disabled = true;&nbsp; if (imgNumber > 1) btnPrev.disabled = false;}function prev() {&nbsp; imgNumber--&nbsp; let img = imgNumber >= 0 ? `img${imgNumber}` : null;&nbsp; if (img) imgDiv.style.background = `url(${im[img]})`;&nbsp; if (imgNumber < totImages) btnNext.disabled = false;&nbsp; if (imgNumber === 1) btnPrev.disabled = true;}#imgDiv {&nbsp; background: url("https://placehold.it/300x150/ff0000/ffffff?text=image_1");&nbsp; height: 150px;&nbsp; width: 300px;}#btnDiv {&nbsp; width: 300px;&nbsp; height: auto;&nbsp; position: relative;}#btnPrev {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;}#btnNext {&nbsp; position: absolute;&nbsp; right: 0;&nbsp; top: 0;}<div id="imgDiv"></div><div id='btnDiv'>&nbsp; <button id="btnPrev" disabled>&loarr; Prev</button>&nbsp; <button id="btnNext">Next &roarr;</button></div>
0

慕沐林林

var i = 0;var im = [{&nbsp; &nbsp; 'img': 'https://picsum.photos/536/354'&nbsp; },&nbsp; {&nbsp; &nbsp; 'img': 'https://picsum.photos/id/237/536/354'&nbsp; },&nbsp; {&nbsp; &nbsp; 'img': 'https://picsum.photos/seed/picsum/536/354'&nbsp; }];var a = document.getElementById('button');var b = document.getElementById('div')a.addEventListener('click', next);function next() {&nbsp; console.log(i);&nbsp; b.style.background = `url(${im[i].img})`;&nbsp; i++;&nbsp; if (i == im.length) {&nbsp; &nbsp; i = 0;&nbsp; }}div {&nbsp; background: url("https://picsum.photos/id/1084/536/354?grayscale");&nbsp; height: 300px;&nbsp; width: 300px;}<div id="div"></div><button id="button">Next</button>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答