Как мне программно изменить картинку внутри div? - PullRequest
Новая
       1

Как мне программно изменить картинку внутри div?

0 голосов
/ 13 марта 2020
  1. Здесь есть полный код, как вы, ребята, видите. 
<!DOCTYPE html>
<html lang="en">
<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);

поэтому здесь, насколько мне известно, он должен предоставить ссылку на каждый пи c, поскольку l oop запускается, но в программе. Я не получаю желаемого результата. Не могли бы вы помочь мне понять, почему это происходит? 

function next()
    {
        for(var i=1;i<im.length;i++)
            {
                b.style.background=`url(${im[i].img})`;
            }
    }

</script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 13 марта 2020

Если вы хотите прокручивать картинки по нажатию кнопки, тогда вы не сможете использовать al oop. В коде, который вы разместили, по нажатию кнопки он быстро прошел по всем изображениям. Вам нужно создать счетчик и увеличивать его при каждом нажатии кнопки.

Фрагмент ниже, который я добавил к предыдущей кнопке, также позволяет просматривать изображения как вперед, так и назад. 

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>&loarr;	Prev</button>
  <button id="btnNext">Next &roarr;</button>
</div>
0 голосов
/ 13 марта 2020

Надеюсь, это поможет вам. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...