大图_html
<div class="bigImg" id="bigImg" style="display:none">
<div class="icon_prev"></div>
<div class="icon_next"></div>
<div class="icon_close"></div>
<div class="img_content"></div>
</div>
大图_CSS
.bigImg{
position: fixed;
background-color: rgba(0,0,0, 0.9);
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.icon_prev,.icon_next{
position: absolute;
width: 80px;
color: #ccc;
font-size: 30px;
cursor: pointer;
z-index: 101;
font-family: cursive;
}
.icon_prev:hover, .icon_next:hover{
background: rgba(0,0,0, 0.1);
color: #fff;
}
.icon_prev{
left: 0;
top: 0;
bottom: 0;
}
.icon_next{
right: 0;
top: 0;
bottom: 0;
}
.icon_prev::before{
content:"<";
position: absolute;
height: 30px;
margin-top: -30px;
top: 50%;
left: 35px;
}
.icon_next::before{
content: ">";
position: absolute;
height: 30px;
margin-top: -30px;
top: 50%;
left: 35px;
}
.icon_close{
position: absolute;
top: 20px;
right: 20px;
width: 25px;
height: 25px;
color: #ccc;
font-size: 34px;
line-height: 20px;
text-align: center;
cursor: pointer;
z-index: 102;
}
.icon_close::before{
content: "x";
}
.img_content{
position: relative;
width: 999999px;
}
.img_item{
float: left;
position: relative;
background-image: url(../img/下载.gif);
background-position: center center;
background-repeat: no-repeat;
}
.img_item:after{
clear: both;
content: "";
display: block;
}
.img_item img{
box-shadow: 0 0 8px rgba(0,0,0,0.8);
position: absolute;
top: 50%;
left: 50%;
}
加载图片_GIF
动态添加图片_JS
追加大图项目
//本地图片或接口图片
var imgList = [
"../img/001.png",
"../img/002.png",
];
var length= imgList.length;
for (var i = 0; i < length; i++) {
var imgSlide = $('<div class="img_item"><img src="' + imgList [i] + '"></li>');
$("#bigImg .img_content").append(imgSlide);
｝
初始化大图样式
// 大图动态样式
$("#bigImg .img_content").css({"transition-duration":"500ms","transform":"translate(0px, 0px)"});
$("#bigImg .img_item").css({"width":window.innerWidth,"height":window.innerHeight});
$("#bigImg .img_item img").css(
{
"width":window.innerWidth,
"height":"auto",
"margin-left": -window.innerWidth*0.5,
"margin-top": -window.innerHeight*0.5*0.7,
"display": "inline"
});
点击查看大图事件
$('#goal li').on('click', function() {
var index = $(this).index();
var max = -window.innerWidth*index;
$("#bigImg").show();
$("#bigImg .img_content").css({"transition-duration":"500ms","transform":"translate("+max+"px, 0px)"});
});
点击关闭大图
$('#bigImg .icon_close').on('click', function(e) {
e.preventDefault();
$("#bigImg").hide();
})
左右点击切换大图
var imgTotal = $("#bigImg .img_content").children(".img_item").length;
// 点击向左切换图片
$('#bigImg .icon_prev').on('click', function(e) {
e.preventDefault();
var sx = $("#bigImg .img_content").css("transform").replace(/[^0-9\-,]/g,'').split(',')[4];
var max = window.innerWidth*imgTotal;
var x = Number(sx)+window.innerWidth;
if(-Number(sx) > 0 && -Number(sx)< max ){
$("#bigImg .img_content").css({"transition-duration":"500ms","transform":"translate("+x+"px, 0px)"});
}
//首图_隐藏左边切换按钮
$('#bigImg .icon_next').show(); if(-Number(sx) == window.innerWidth){ $(this).hide(); }
})
// 点击向右切换图片
$('#bigImg .icon_next').on('click', function(e) {
e.preventDefault();
var sx = $("#bigImg .img_content").css("transform").replace(/[^0-9\-,]/g,'').split(',')[4];
var max = -window.innerWidth*imgTotal;
var x = Number(sx)-window.innerWidth;
if(max < x){
$("#bigImg .img_content").css({"transition-duration":"500ms","transform":"translate("+x+"px, 0px)"});
}
//末图_隐藏右边切换按钮
$('#bigImg .icon_prev').show(); var maxImg = sx-window.innerWidth*2; if(maxImg == max){ $(this).hide(); }
})
左右滑动切换大图
$("#bigImg .img_item").on("touchstart", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("#bigImg .img_item").on("touchend", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
index = $(this).index();
//左滑
if (X > 50) {
if(index == 0){
return;
}
var sx = $("#bigImg .img_content").css("transform").replace(/[^0-9\-,]/g,'').split(',')[4];
var max = window.innerWidth*imgTotal;
var x = Number(sx)+window.innerWidth;
if(-Number(sx) > 0 && -Number(sx)< max ){
$("#bigImg .img_content").css({"transition-duration":"500ms","transform":"translate("+x+"px, 0px)"});
}
//首图_隐藏左边切换按钮
$('#bigImg .icon_next').show(); if(-Number(sx) == window.innerWidth){ $('#bigImg .icon_prev').hide(); }
}
//右滑
else if (X < -50) {
var sx = $("#bigImg .img_content").css("transform").replace(/[^0-9\-,]/g,'').split(',')[4];
var max = -window.innerWidth*imgTotal;
var x = Number(sx)-window.innerWidth;
if(max < x){
$("#bigImg .img_content").css({"transition-duration":"500ms","transform":"translate("+x+"px, 0px)"});
}
//末图_隐藏右边切换按钮
$('#bigImg .icon_prev').show(); var maxImg = sx-window.innerWidth*2; if(maxImg == max){ $('#bigImg .icon_next').hide(); }
}
//下滑
else if (Y > 50) {
// alert('下滑');
}
//上滑
else if (Y < -50) {
// alert('上滑');
}
});
效果图
