时间戳

首页 > 解决方案 > 如何在同一页面上的 html 中添加不同的图像幻灯片？

javascript - 如何在同一页面上的 html 中添加不同的图像幻灯片？

问题描述

从 API 我得到图像数组，当第二次请求 API 时，我得到另一个不同图像的数组。当按下按钮时，我想将图像数组添加到引导库中，当再次按下时，我想将第二个数组添加到另一个库中。我不明白如何重用相同的引导 html 模板并在同一个 html 页面中创建不同的图像库。API对象：

 {
  "title": "rodeo",
  "author": "consectetur",
  "images": [
"http://example/photo.jpg",
"http://example/photostwo.jpg",
"http://example/photosone.jpg"
  ],
  "year": "1998"
} 


<div>
  <div id="container"></div>
  <button id="dataBtn"></button>
</div>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
    <img class="d-block w-100" src="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>


function test(){
const carouselItem = document.querySelector('.carousel-item');

function create(element) {
    return document.createElement(element);
}

function append(parent, el) {
    return parent.appendChild(el);
}


for (image of data.images) {
    let img = create('img');
    img.classList.add(‘d - block’, ‘w - 100’);
    img.src = image;
    append(carouselItem, img);

} 
}
test();
document.getElementById("dataBtn").addEventListener("click", test);

标签： javascripthtmltwitter-bootstrap

解决方案

使用引导程序，使用 jQuery 框架这些任务会更容易！正如您在“问题”标签中仅提及 Javascript，这是一种展示我们如何使用纯 Javascript 实现它的方法，您可以轻松地将其包含在您的项目中。

我们克隆 Carousel 容器，然后用新图片填充动态添加的克隆。 

//An initial status we could check later
var initial = true;
//A global counter that could be used to distinguish between non-DOM duplicates
let i = 0;

function test() {

	//Here A random array of pics would be used
	//Just to simulate an API call
	var rand = Math.floor(Math.random() * Math.floor(2));
	var pix = JSON.parse('{"data":[{"title":"rodeo","author":"consectetur","images":["https://images.unsplash.com/photo-1533522688752-ef641aa0607b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1550543941-281cef85c281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1565291707930-351bfd98e772?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60"],"year":"1998"},{"title":"Flasher","author":"Photo Addict","images":["https://images.unsplash.com/photo-1516724562728-afc824a36e84?ixlib=rb-1.2.1&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1516962126636-27ad087061cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=125&q=80","https://images.unsplash.com/photo-1518890414976-bb41382be43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=80"],"year":"2020"},{"title":"Domotics","author":"iOting","images":["https://images.unsplash.com/photo-1528255671579-01b9e182ed1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1494351416886-f6b4ed2a1d68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1547938094-b000547cbeb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60"],"year":"2020"}]}');
	const carouselItem = document.querySelector('.carousel-item');

	function create(element) {
		return document.createElement(element);
	}
	function append(parent, el) {
		return parent.appendChild(el);
	}

	var model = document.getElementById('carouselExampleControls');

	function duplicate() {
		i++;
		//We clone the default laoded Gallery container
		var clone = model.cloneNode(true);
		clone.id = "cloneGallery" + i;
		model.parentNode.appendChild(clone);
		//We identify the dynamically newly added picture container
		var clItem = document.getElementsByClassName('carousel-item')[i];
		//We empty it... so we could replace by new pics
		clItem.innerHTML = '';
		for (image of pix.data[rand].images) {
			var img = create('img');
			img.classList.add('d-block', 'w-100');
			img.src = image;
			append(clItem, img);
		}
	}
	if (initial) {
		for (image of pix.data[rand].images) {
			var img = create('img');
			img.classList.add('d-block', 'w-100');
			img.src = image;
			append(carouselItem, img);
		}
	} else {
		duplicate();
	}
	initial = false;
}
document.getElementById("dataBtn").addEventListener("click", test);
<div>
  <div id="container"></div>
  <button id="dataBtn">Add Pictures!</button>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item">
    
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

推荐阅读