创建图片灯箱画廊通常采用的技术包含了HTML、CSS和JavaScript三种语言。下面我们将详细讲解如何使用这三种语言来创建图片灯箱画廊。

创建HTML代码

我们先来创建HTML代码，在HTML中包含了整个网页的结构和内容信息。在创建HTML时，常规做法是先创建一个HTML模板，在模板中包含了网页的基本信息。代码示例如下：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>图片灯箱画廊</title>
</head>
<body>
  <h1>图片灯箱画廊</h1>

  <div id="gallery">
    <img src="http://example.com/image1.jpg" alt="">
    <img src="http://example.com/image2.jpg" alt="">
    <img src="http://example.com/image3.jpg" alt="">
    <img src="http://example.com/image4.jpg" alt="">
  </div>

  <div id="lightbox">
    <img src="">
  </div>

  <script src="gallery.js"></script>
</body>
</html>

在这个模板中，我们使用了HTML5的语法，定义了网页的基本结构和内容。其中，<h1>标签定义了网页的标题，<div>标签用于定义画廊和灯箱的容器。在画廊的容器中，我们定义了4张图片，这里使用了示例图片的链接，读者可以自行替换为自己的图片链接。在灯箱的容器中，我们定义了一个空的<img>标签，用于显示选中的图片。

创建CSS样式

我们需要使用CSS样式来美化我们的图片灯箱画廊。在CSS中，我们要为画廊和灯箱容器、图片样式提供相关的样式代码。代码示例如下：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  background-color: #f1f1f1;
  text-align: center;
  padding-top: 50px;
}

#gallery {
  margin: 40px auto;
  max-width: 800px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 20px;
  justify-items: center;
  align-items: center;
}

#gallery img {
  cursor: pointer;
  max-width: 100%;
  height: auto;
}

#lightbox {
  position: fixed;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 100;
}

#lightbox img {
  max-width: 100%;
  height: auto;
  margin-top: 10%;
  margin-bottom: 10%;
}

在上述代码中，我们先设置了全局样式，包括了盒模型样式、页面结构和背景颜色。接下来我们定义了画廊和灯箱容器的样式，包括了容器的位置、大小、显示方式和对齐方式等属性。在样式中我们也提供了图片的样式，包括图片样式、鼠标指针形状等属性。通过这些样式的定义可以使我们的画廊和灯箱更加美化。

创建JavaScript脚本

随着HTML和CSS的完成，我们现在需要编写与之关联的JavaScript代码，通过JavaScript实现灯箱的切换效果。具体的JavaScript示例代码可以如下：

var gallery = document.getElementById('gallery');
var items = gallery.getElementsByTagName('img');

var lightbox = document.getElementById('lightbox');
var close = lightbox.getElementsByTagName('img')[0];
var content = lightbox.getElementsByTagName('img')[1];

for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    var src = this.src;
    lightbox.style.display = 'block';
    content.src = src;
  });
}

close.addEventListener('click', function() {
  lightbox.style.display = 'none';
});

在上述代码中，我们首先获取了我们在HTML中定义的画廊和灯箱容器对象。接下来我们绑定了画廊容器中的每个图片的点击事件，并且将点击的图片赋值给灯箱中的展示图片对象，同时显示灯箱容器。最后我们绑定了灯箱关闭按钮的点击事件，当点击该按钮时，隐藏灯箱容器。

示例一

以上三段代码的整合文件的在线演示：https://codepen.io/pen/?editors=1010

示例二

在示例一上，我们进一步优化了灯箱的功能，增加了自动循环切换和手动关闭功能。代码示例如下：

var gallery = document.getElementById('gallery');
var items = gallery.getElementsByTagName('img');

var lightbox = document.getElementById('lightbox');
var prev = lightbox.querySelector('.prev');
var next = lightbox.querySelector('.next');
var close = lightbox.querySelector('.close');
var content = lightbox.querySelector('.content');

var currentIndex = 0, maxIndex = items.length - 1;

function showSlide(index) {
  var item = items[index];
  var src = item.src;
  content.src = src;
}

function nextSlide() {
  if (currentIndex === maxIndex) {
    currentIndex = 0;
  } else {
    currentIndex++;
  }
  showSlide(currentIndex);
}

function prevSlide() {
  if (currentIndex === 0) {
    currentIndex = maxIndex;
  } else {
    currentIndex--;
  }
  showSlide(currentIndex);
}

for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    var index = Array.prototype.indexOf.call(items, this);
    showSlide(index);
    lightbox.style.display = 'block';
    currentIndex = index;
  });
}

close.addEventListener('click', function() {
  lightbox.style.display = 'none';
});

prev.addEventListener('click', function() {
  prevSlide();
});

next.addEventListener('click', function() {
  nextSlide();
});

setInterval(function() {
  nextSlide();
}, 5000);

在这个示例中，我们在灯箱中增加了向前和向后切换按钮，并且增加了自动切换效果。我们定义了一个当前显示图片的索引，增加了展示方法和切换方法。我们在画廊图片的点击事件中增加了当前索引的记录，并且显示第一张图片。在关闭按钮的点击事件中我们只需要关闭灯箱容器即可。在切换按钮的点击事件中，我们使用前一张和后一张切换效果方法，并且超出图片索引的范围进行处理。最后在自动循环切换定时器中，我们调用了后一张切换效果方法，实现了自动循环切换的效果。

附上一个多图轮播展示的在线链接：http://mygoshop.info/demo/photo/1353.htm

通过上述示例，我们了解了如何使用HTML、CSS和JavaScript技术实现图片灯箱画廊的功能，能够让用户更好地进行图片的浏览和展示，具备较高的使用价值。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用HTML CSS和JavaScript创建图片灯箱画廊 - Python技术站

如何使用HTML CSS和JavaScript创建图片灯箱画廊

创建HTML代码

创建CSS样式

创建JavaScript脚本

示例一

示例二

相关文章