准备

1.基于jquery框架

2.准备切换图片

pre图片
next图片
close图片

如图所示

代码

1.html

		<div class="qiehuan">
			<ul class="symposium" id="IMG_List">
			</ul>
			<ul id="imglist" style="overflow: hidden;">
				<input type="hidden" id="input0" name="img" data-bigimg="./img/2.jpg" data-smallimg="./img/2.jpg"
					data-desc="图1">
				<input type="hidden" id="input1" name="img" data-bigimg="./img/1.jpeg" data-smallimg="./img/1.jpeg"
					data-desc="图2">
				<input type="hidden" id="input2" name="img" data-bigimg="./img/2.jpg" data-smallimg="./img/2.jpg"
					data-desc="图3">
				<input type="hidden" id="input3" name="img" data-bigimg="./img/3.jpg" data-smallimg="./img/3.jpg"
					data-desc="图4">
				<input type="hidden" id="input4" name="img" data-bigimg="./img/2.jpg" data-smallimg="./img/2.jpg"
					data-desc="图5">
				<input type="hidden" id="input5" name="img" data-bigimg="./img/1.jpeg" data-smallimg="./img/1.jpeg"
					data-desc="图6">
				<input type="hidden" id="input6" name="img" data-bigimg="./img/3.jpg" data-smallimg="./img/3.jpg"
					data-desc="图7">
				<input type="hidden" id="input7" name="img" data-bigimg="./img/2.jpg" data-smallimg="./img/2.jpg"
					data-desc="图8">
			</ul>
			<div class="mask" style="display: none;">
				<div class="magnify_img">
				</div>
				<img class="close" src="./img/colse.png">
				<div class="button-next"></div>
				<div class="button-prev"></div>
			</div>
		</div>

2.CSS

			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-decoration: none;
			}

			.symposium {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}

			.symposium li {
				width: 25%;
				margin-top: 30px;
			}

			.symposium li .hod {
				position: relative;
				height: 185px;
				background: #f5f5fa;
				overflow: hidden;
				text-align: center;
				width: 80%;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.symposium li p {
				margin-top: 30px;
				text-align: center;
			}

			.symposium li .hod img {
				max-width: 100%;
			}

			.mask {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.8);
				z-index: 10;
				display: none;
			}

			.mask .close {
				position: absolute;
				right: 30px;
				top: 26px;
				cursor: pointer;
			}

			input,
			img,
			textarea {
				display: block;
				border: 0;
				outline: 0;
			}

			.button-next,
			.button-prev {
				width: 48px;
				height: 48px;
				position: absolute;
				top: 50%;
				margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
				z-index: 10;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all .25s;
				z-index: 1002;
			}

			.button-next {
				left: 30px;
				right: auto;
				background: url(img/img_left.png);
			}

			.button-prev {
				right: 30px;
				left: auto;
				background: url(img/img_right.png) no-repeat;
			}

			.magnify_img {
				width: 100%;
				height: 620px;
				max-width: 826px;
				max-height: 620px;
				z-index: 1000;
				position: fixed;
				left: 50%;
				top: 50%;
				margin-left: -413px;
				margin-top: -310px;
				text-align: center;
			}

			.magnify_title {
				color: #fff;
				text-align: center;
				position: absolute;
				bottom: 0px;
				width: 100%;
			}

			.magnify_img .bigImgSrc {
				display: -webkit-box;
				-moz-box-align: center;
				-webkit-box-align: center;
				-moz-box-pack: center;
				-webkit-box-pack: center;
				height: 620px;
			}

			.magnify_img img {
				width: auto;
				height: auto;
				max-height: 620px;
				max-width: 826px;
				margin: 0 auto;
			}

3.js

		function playImg(playlist) {

			var shuffle = localStorage.shuffle || 'false';

			for (var i = 0; i < $("#imglist input").length; i++) {

				var item = $("#imglist input")[i];
				$('#IMG_List').append('<li><div class="hod"><img  src="' + $("#input" + i).data("smallimg") +
					'"></div><p>' + $("#input" + i).data("desc") + '</p></li>');
			}

			var switchTrack = function(i) {
				if (i < 0) {
					track = currentTrack = $("#imglist input").length - 1;
				} else if (i >= $("#imglist input").length) {
					track = currentTrack = 0;
				} else {
					track = i;
				}

				loadIMG(track);

			}

			var loadIMG = function(i) {
				var item = $("#imglist input").length,
					newmask = $('.magnify_img').html('<h2 class="magnify_title">' + $("#input" + i).data("desc") +
						'</h2><div class="bigImgSrc"><img  src="' + $("#input" + i).data("bigimg") + '"></div>')
					.appendTo('.mask');


				$('#IMG_List li .hod').removeClass('on').eq(i).addClass('on');

			}

			var currentTrack = shuffle === 'true' ? $("#imglist input").length : 0;
			loadIMG(currentTrack);
			$('.button-next').on('click', function() {

				switchTrack(--currentTrack);

			});
			$('.button-prev').on('click', function() {

				switchTrack(++currentTrack);
			});
			$('.close').on('click', function() {
				$('.mask').hide();
			});
			//		
			$('#IMG_List li').each(function(i) {

				var _i = i;
				$(this).on('click', function() {
					$('.mask').show();
					switchTrack(_i);
				});
				$(this).mousemove(function() {
					$(this).find("p").css("color", "#FF8410");
				});
				$(this).mouseout(function() {
					$(this).find("p").css("color", "#4D4D4D");
				});
			});
		}
		playImg();