开源达人 html+css+js Lightbox 轮播图

<style type="text/css">
	body {
		font-family: Verdana, sans-serif;
		margin: 0;
	}

	* {
		box-sizing: border-box;
	}

	.row>.column {
		padding: 0 8px;
	}

	.row:after {
		content: "";
		display: table;
		clear: both;
	}

	.column {
		float: left;
		width: 25%;
	}

	/* 弹窗背景 */
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		padding-top: 100px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: black;
	}

	/* 弹窗内容 */
	.modal-content {
		position: relative;
		background-color: #fefefe;
		margin: auto;
		padding: 0;
		width: 90%;
		max-width: 1200px;
	}

	/* 关闭按钮 */
	.close {
		color: white;
		position: absolute;
		top: 10px;
		right: 25px;
		font-size: 35px;
		font-weight: bold;
	}

	.close:hover,
	.close:focus {
		color: #999;
		text-decoration: none;
		cursor: pointer;
	}

	.mySlides {
		display: none;
	}

	.cursor {
		cursor: pointer
	}

	/* 上一页 & 下一页 按钮 */
	.prev,
	.next {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		padding: 16px;
		margin-top: -50px;
		color: white;
		font-weight: bold;
		font-size: 20px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
		user-select: none;
		-webkit-user-select: none;
	}

	/* 定位下一页按钮到右侧 */
	.next {
		right: 0;
		border-radius: 3px 0 0 3px;
	}

	/* 鼠标移动上去修改背景色为黑色 */
	.prev:hover,
	.next:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

	/* 页数(1/3 etc) */
	.numbertext {
		color: #f2f2f2;
		font-size: 12px;
		padding: 8px 12px;
		position: absolute;
		top: 0;
	}

	img {
		margin-bottom: -4px;
	}

	.caption-container {
		text-align: center;
		background-color: black;
		padding: 2px 16px;
		color: white;
	}

	.demo {
		opacity: 0.6;
	}

	.active,
	.demo:hover {
		opacity: 1;
	}

	img.hover-shadow {
		transition: 0.3s
	}

	.hover-shadow:hover {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
	}
</style>
<!-- 图片改为你的图片地址 -->
<h2 style="text-align:center">Lightbox</h2>

<div class="row">
	<div class="column">
		<img src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%"
			onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%"
			onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%"
			onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%"
			onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
	</div>
</div>

<div id="myModal" class="modal">
	<span class="close cursor" onclick="closeModal()">&times;</span>
	<div class="modal-content">


		<!--  -->
		<div class="mySlides">
			<div class="numbertext">1 / 4</div>
			<img src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%">
		</div>

		<div class="mySlides">
			<div class="numbertext">2 / 4</div>
			<img src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%">
		</div>

		<div class="mySlides">
			<div class="numbertext">3 / 4</div>
			<img src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%">
		</div>

		<div class="mySlides">
			<div class="numbertext">4 / 4</div>
			<img src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%">
		</div>
		<!--  -->


		<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
		<a class="next" onclick="plusSlides(1)">&#10095;</a>

		<div class="caption-container">
			<p id="caption"></p>
		</div>


		<div class="column">
			<img class="demo cursor" src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%"
				onclick="currentSlide(1)" alt="Nature and sunrise">
		</div>
		<div class="column">
			<img class="demo cursor" src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%"
				onclick="currentSlide(2)" alt="Trolltunga, Norway">
		</div>
		<div class="column">
			<img class="demo cursor" src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%"
				onclick="currentSlide(3)" alt="Mountains and fjords">
		</div>
		<div class="column">
			<img class="demo cursor" src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%"
				onclick="currentSlide(4)" alt="Northern Lights">
		</div>
	</div>
</div>

<script>
	//html 要div 嵌套来写
	// CSS 先写整体，在写细节
	// js可以先写中文流程，在写获取事件效果等
	// 可以考虑给一个索引值。或考虑开始，结尾。
	// 可以先获取所有的dom。
	// 在每个HTML 中可以内联的形式，写事件，列如：onclick="open()"方式,在js中写 function open(){ } 这样的形式。 

	function openModal() {
		document.getElementById('myModal').style.display = 'block';
	}

	function closeModal() {
		document.getElementById('myModal').style.display = 'none';
	}


	//class = mySlides
	var index = 1;
	showlide(index);

	function plusSlides(n) {
		//showlide(index+=n); //index= 1+n; 左边：0   1+-1 = 0  右边：2   1+1 = 2  
		showlide(index = index + n);
	}

	function currentSlide(n) {
		showlide(index = n);
	}

	function showlide(n) {
		var mySlides = document.getElementsByClassName('mySlides');

		if (n > mySlides.length) {
			index = 1;
		}
		if (n < 1) {
			index = mySlides.length;
		}

		for (i = 0; i < mySlides.length; i++) {
			mySlides[i].style.display = 'none';
		}

		mySlides[index - 1].style.display = "block";


	}
</script>