js图片预览放大缩小旋转效果的实现

我在这里直接上代码HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
		<link rel="stylesheet" href="./js/swiper/swiper-bundle.min.css">
		<script src="./js/swiper/swiper-bundle.min.js"></script>
		<script src="js/jquery-3.6.3.js"></script>
		<link rel="stylesheet" href="css/pingmu.css">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<link rel="stylesheet" href="css/viewer.min.css"> 
		<script src="js/viewer.min.js"></script>
	</head>
	<body>
		<div class="box">
			<div class="head">
				<p>新乡市</p>
				<img src="img/地图坐标.png" alt="">
			</div>
			<div class="null"></div>
			<!-- 轮播图 -->
			<div class="swiper">
				<div class="swiper-wrapper">
			
				</div>
				<div class="swiper-pagination">
			
				</div>
			</div>
			<div class="laste">
				<div class="da">
					<div class="one_child">
						<img src="img/笔记.png" alt="">
						<div class="name">
			
							<p>你是六年</p>
						</div>
						<div class="particulars">
							<p></p>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 底部 -->
			<div class="nulle"></div>
			<div class="buttom">
				<div class="buttoms">
					<div class="bute"onclick="list()">
						<div class="bbb"><img src="img/笔记 (2).png" alt=""></div>
						<div class="aaab">
							<p class="shou">首页</p>
						</div>
					</div>
					<div class="bute" >
						<div class="bbb"><img src="img/播放.png" alt=""></div>
						<div class="aaa">
							<p class="music">屏幕</p>
						</div>
					</div>
					<div class="bute" onclick="memberk()">
						<div class="bbs"><img src="img/加号2-fill.png" alt=""></div>
						<div class="aaa">
							<p></p>
						</div>
					</div>
					<div class="bute" onclick="need()">
						<div class="bbb"><img src="img/消息 (3).png" alt=""></div>
						<div class="aaa">
							<p>聊天</p>
						</div>
					</div>
					<div class="bute" onclick="personage()">
						<div class="bbb"><img src="img/个人中心 (1).png" alt=""></div>
						<div class="aaa">
							<p>我的</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/pingmu.js"></script>
	</body>
</html>

js部分


let data;
// 请求接口
encapsulation()

function encapsulation() {
	$.ajax({
		type: "POST",
		url: 'http://wcy.jingyi.icu/mobile/screen/index',
		data: {},
		success: function(res) {
			console.log(res);
			data = res.data;
			banner(res.data)
			fu(res.data)
			// feng(res.data)
			// dong(res.data)
		}
	})
}
function banner(data) {
	console.log(data);
	let str = ''
	// let r = ''
	//轮播图插件
	for (let i = 0; i < data.length; i++) {
		console.log(data[i].type);
		if(data[i].status==2&&data[i].type==2){
				str += `
				
				<div class="swiper-slide" onclick="link()">
							<img src="http://wcy.jingyi.icu${data[i].img}" alt="" onerror="nofind()" >
							
							</div>
				`
			}
			$(".swiper-wrapper").html(str)
			// $(document).html(r)
			var mySwiper = new Swiper('.swiper', {
				direction: 'horizontal', // 垂直切换选项
				loop: true, // 循环模式选项
				pagination: {
					el: ".swiper-pagination"
				},
				autoplay: {
					delay: 1000,
					stopOnlastSlide: false,
					disableOnInteraction: false,
				}
			})
		}
	
}
// 瀑布流页面
// function fu(data) {
//   console.log(data);
//   let str='';
//   for (let i = 0; i < data.length; i++) {
// 	  if(data[i].status==2&&data[i].type==1){
//     str+=`
//  <div class="da">
//  	<div class="one_child">
//  		<img src="http://wcy.jingyi.icu${data[i].img}" alt="" onerror="nofind()" >
//  		<div class="name">
//  			<p>${data[i].introduce}</p>
//  		</div>
//  	</div>
//  </div>
//     `
//   }
//   }
//   $('.laste').html(str);

// }
function fu(data) {
  console.log(data);
  let str = '';
  for (let i = 0; i < data.length; i++) {
    if (data[i].status == 2 && data[i].type == 1) {
      str += `
        <div class="da">
          <div class="one_child">

              <img src="http://wcy.jingyi.icu${data[i].img}" alt="" onclick="getbig(this)">
            <div class="name">
              <p>${data[i].introduce}</p>
            </div>
          </div>
        </div>
      `;
    }
  }
  $('.laste').html(str);

  $('[data-toggle="lightbox"]').viewer({
    navbar: true
  });

  $('.viewer-container').on('click', function() {
    $('.viewer-container').viewer('hide');
  });
}
// 图片预览




function list(){
	window.location.href='shouye.html'
}
function personage(){
	window.location.href='wodeyong.html'
}
function getbig(obj){
	var viewer = new Viewer(obj,{
		url:'src',
		navar:false
	});
	viewer.show()
}

这是一个viewer插件在使用此插件之前要确保引用

这两个链接如果无法使用还要引用相关文件

js图片预览放大缩小旋转效果的实现

猜你喜欢