一个简单的点击弹窗图片轮换代码

admin 网站技能 2021-07-26 浏览

第一部分：html部分：
<button>点我打开图库</button>
<div id="idn">
<h3>特点</h3>
<p style="color: #666;">页面样式就懒得写了，重点的功能，注释写的比较多，主要方便给新手查看</p>
<div>
<ul>
<ol>鼠标左右键可切换图片</ol>
<ol>键盘左右键可切换图片</ol>
<ol>点击空白区域关闭图片</ol>
<ol>打开图库按钮可自行修改内容和样式</ol>
<ol>如需添加图片只需要给js中的“imgurl”数组添加内容即可</ol>
</ul>
</div>

</div>


<div id="imgLayer"></div>
<div id="imgBoxl" class="modal">
<img id="bigimg" src="http://www.jq22.com/img/cs/500x300-1.png" alt="bigimg1">
</div>

第二部分：css部分：

* {
   margin:0;
   padding:0
}
html,body {
   height:100%
}
body {
   width:100%
}
button {
   margin:50px 0px 0px 50%;
   width:100px;
   height:30px;
   border-radius:5px;
   background:linear-gradient(to left,#0054ff,#00e4ff);
   color:aliceblue;
   cursor:pointer
}
#imgLayer {
   display:none;
   z-index:5;
   position:fixed;
   width:100%;
   height:100%;
   background:rgba(0,0,0,0.6);
   top:50%;
   left:50%;
   transform:translateX(-50%) translateY(-50%);
}
#imgBoxl {
   display:none;
   height:100%;
   z-index:6;
   position:fixed;
   margin:5%;
}
#bigimg {
   position:fixed;
   top:50%;
   left:50%;
   transform:translateX(-50%) translateY(-50%);
}
ul ol {
   margin:20px
}
第三部分：js部分：

$(function() {
$("button").click(function() { //打开图库窗口
var imgLayer = document.getElementById("imgLayer");
var imgBoxl = document.getElementById("imgBoxl");
imgLayer.style.display = "block";
imgBoxl.style.display = "block";
imgSg()
})

$("#imgLayer").click(function() { //关闭图库窗口
var imgLayer = document.getElementById("imgLayer");
var imgBoxl = document.getElementById("imgBoxl");
imgLayer.style.display = "none";
imgBoxl.style.display = "none";
})

var imgnum = 0; //图片序号
var imgurl = [
"http://www.jq22.com/img/cs/500x500-1.png",
"http://www.jq22.com/img/cs/500x500-2.png",
"http://www.jq22.com/img/cs/500x500-3.png",
"http://www.jq22.com/img/cs/500x300-1.png",
"http://www.jq22.com/img/cs/500x300-2.png",
"http://www.jq22.com/img/cs/500x300-3.png",
"http://www.jq22.com/img/cs/300x500-1.png",
"http://www.jq22.com/img/cs/300x500-2.png",
"http://www.jq22.com/img/cs/300x500-3.png"
]; //声明素组，用来存放图片同时定义图片的名称

document.getElementById("bigimg") //获取修改图库的位置

$('img').bind("contextmenu", function(e) {
return false;
}) //禁用图片的右键菜单

bigimg.onclick = left;
bigimg.oncontextmenu = right; //鼠标左右键切换右边的图片

function keyqh(e) {
var e = e || event;
var k = e.keyCode;

if (k == 37) left()
if (k == 39) right()
}
document.onkeydown = keyqh //键盘左右键切换图片

function imgSg() {
var img = document.getElementById("bigimg")
var imgw = img.naturalWidth
var imgh = img.naturalHeight //获取图片的原始宽高
var userw = document.body.clientWidth
var userh = document.body.clientHeight //获取用户游览器的宽高
if (imgw >= (userw * 0.8) && imgh <= (userh * 0.8)) { //判断图片大小是否超过用户游览器宽高的80%，以定义图片大小
img.style.width = "80%";
img.style.height = "auto";
} else if (imgh >= (userh * 0.8)) {
img.style.width = "auto";
img.style.height = "80%";
} else {
img.style.width = "auto";
img.style.height = "auto";
}
} //修改图片大小以避免

function left() { //向左切换图片
var bigimg = document.getElementById("bigimg"); //引用显示图片的div的ID
imgnum--; //图片序号减1
if (imgnum < 0) { //判断是否已经到第一张图片，如果已经到第一张，则从最后一张重新开始
imgnum = imgurl.length - 1;
}

bigimg.src = imgurl[imgnum]; //修改图片的地址
imgSg()
}

function right() { //向右切换图片
var bigimg = document.getElementById("bigimg"); //引用显示图片的div的ID
imgnum++; //图片序号加1
if (imgnum >= imgurl.length) { //判断是否达已经到最后一张，如果已经到最后一张，则从第一张开始
imgnum = 0;
}
bigimg.src = imgurl[imgnum]; //修改图片的地址
imgSg()

}

})