上一篇我已经写到，实现图片放大效果图。
https://blog.csdn.net/weixin_45932157/article/details/104397913
不是很详细，现在我主要实现可以进行图片切换效果。
当然，你也可以加一些效果图：
css部分：
.over {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 100;
}
.tempContainer {
position: fixed;
width: 100%;
margin-right: 0px;
margin-left: 0px;
text-align: center;
z-index: 101;
height: 100%;
}
.body-left {
width: 5%;
height: 100%;
background-color: black;
float: left;
cursor: pointer;
border: 1px solid #C3BBB8;
}
.body-left img {
width: 100%;
z-index: 102;
display: block;
border: 1px solid #C3BBB8;
margin-top: 400%;
}
.body-right {
height: 100%;
width: 5%;
background-color: black;
float: left;
cursor: pointer;
border: 1px solid #C3BBB8;
}
.body-center {
height: 100%;
width: 90%;
float: left;
}
.body-right img {
z-index: 102;
width: 100%;
display: block;
border: 1px solid #C3BBB8;
margin-top: 400%;
}
html部分：
<div class="over" style="display:none;"></div><!--背景层-->
<div id="hualang">
@foreach (var item in Model)
{
<img src="~/img/@item.detailsImg" alt="Alternate Text" />
}
<div id="demo1"></div>
</div>
阐述一下：主要调用<div id="hualang">里的图片
js部分：
<script>
$(document).ready(function () {
var imgsObj = $('#hualang img');//需要放大的图像
if (imgsObj) {
$.each(imgsObj, function () {
$(this).click(function () {
var currImg = $(this);
contentshow(currImg);//初始点击状态
});
});
}
else {
return false;
}
function contentshow(currImg) {
coverLayer(1);
var tempContainer = $('<div class=tempContainer></div>');//图片容器
with (tempContainer) {//width方法等同于$(this)
appendTo("body");
var windowWidth = $(window).width();//窗口的宽度
var windowHeight = $(window).height();//窗口的高度
//获取图片原始宽度、高度
var orignImg = new Image();
orignImg.src = currImg.attr("src");
var currImgWidth = orignImg.width;
var currImgHeight = orignImg.height;
if (currImgWidth < windowWidth) {//为了让图片不失真，当图片宽度较小的时候，保留原图
if (currImgHeight < windowHeight) {
var topHeight = (windowHeight - currImgHeight) / 2;
//if (topHeight > 35) {/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
// topHeight = topHeight - 35;
// css('top', topHeight);
//} else {
// css('top', 0);
//}
//图片自适应高度
css('top', topHeight);//上面是适应安卓的，这是适应pc端的
//alert(topHeight + "|" + windowHeight);
html('<div class="body-left" style="height:' + windowHeight + 'px; margin-top:'+-topHeight+'px "><img src="/images/ico_left.png" /></div><div class="body-center"><img border=0 src=' + currImg.attr('src') + '></div ><div class="body-right" style=" height:' + windowHeight + 'px; margin-top:'+-topHeight+'px " ><img src="/images/ico_right.png" /></div>');
} else {
css('top', 0);
//alert(windowWidth + "|" + windowHeight + "|" + currImgWidth);
html('<div class="body-left" style="height:' + windowHeight + 'px" ><img src="/images/ico_left.png" /></div><div class="body-center"><img border=0 src=' + currImg.attr('src') + '></div ><div class="body-right" style=" height:' + windowHeight + 'px"><img src="/images/ico_right.png" /></div>');
}
} else {
var currImgChangeHeight = (currImgHeight * windowWidth) / currImgWidth;
if (currImgChangeHeight < windowHeight) {
var topHeight = (windowHeight - currImgChangeHeight) / 2;//让图片居中显示
//if (topHeight > 35) {
// topHeight = topHeight - 35;
// css('top', topHeight);
//} else {
// css('top', 0);
//}
css('top', topHeight);//上面是适应安卓的，这是适应pc端的
html('<div class="body-left" style="height:' + windowHeight + 'px " ><img src="/images/ico_left.png" /></div><div class="body-center"><img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '></div ><div class="body-right" style=" height:' + windowHeight + 'px" ><img src="/images/ico_right.png" /></div>');
} else {
css('top', 0);
html('<div class="body-left" style="height:' + windowHeight + 'px " ><img src="/images/ico_left.png" /></div><div class="body-center"><img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + ' height=' + windowHeight + '></div ><div class="body-right" style=" height:' + windowHeight + 'px" ><img src="/images/ico_right.png" /></div>');
}
}
}
tempContainer.on("click",".body-center",function () {
$(this).remove();
coverLayer(0);
});
tempContainer.click(function () {
$(this).remove();
});
// alert(currImg.parents("#hualang").children().length);//快速获取所有的图片数量
console.log(currImg.parents("#hualang").children());
showleft(eval(currImg.index()+"-" +1));
showright(eval(currImg.index()+"+" +1),currImg.parents("#hualang").children().length-1);//减一的原因是我上面里面多了一串代码（ <div id="demo1"></div>）
}
//使用禁用蒙层效果
function coverLayer(tag) {
with ($('.over')) {
if (tag == 1 ) {
css('height', $(document).height());
css('display', 'block');
css('opacity', 1);
css("background-color", "#FFFFFF");
css("background-color", "rgba(0,0,0,0.8)"); //蒙层透明度
}
else {
css('display', 'none');
}
}
}
function showleft(id) {//图标左
$(".tempContainer").on("click", ".body-left ", function () {
coverLayer(1);
if (id == -1) {//判断是否为第一张，如果为第一张则停止
layer.alert('已经是第一张图 ，点击中间部分即可退出页面', {icon: 6,time:2000});
return false;
}
contentshow(imgsObj.eq(id));//调用点击左箭头传过来的id,进行图片筛选。
});
}
function showright(id,len) {//图标右
$(".tempContainer").on("click", ".body-right ", function () {
coverLayer(1);
if (id == len) {//判断是否为最后一张，如果为最后一张则停止
//alert("已经是最后一张图");
layer.alert('已经是最后一张图 ，点击中间部分即可退出页面', {icon: 6,time:2000});
return false;
}
contentshow(imgsObj.eq(id));//调用点击右箭头传过来的id,进行图片筛选。
});
}
});
</script>
运行效果：
初始页面显示：
点击进去后，看到的效果为：
点击左箭头显示为：
点击右箭头显示为：
你还可以加一些特效
4903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
