大圖_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
動態(tài)添加圖片_JS
追加大圖項(xiàng)目
//本地圖片或接口圖片
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);
｝
初始化大圖樣式
// 大圖動態(tài)樣式
$("#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"
});
點(diǎn)擊查看大圖事件
$('#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)"});
});
點(diǎn)擊關(guān)閉大圖
$('#bigImg .icon_close').on('click', function(e) {
????e.preventDefault();
????$("#bigImg").hide();
})
左右點(diǎn)擊切換大圖
var imgTotal = $("#bigImg .img_content").children(".img_item").length;
// 點(diǎn)擊向左切換圖片
$('#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(); }
})
// 點(diǎn)擊向右切換圖片
$('#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) {
????// 判斷默認(rèn)行為是否可以被禁用
????if (e.cancelable) {
????????// 判斷默認(rèn)行為是否已經(jīng)被禁用
????????if (!e.defaultPrevented) {
????????????e.preventDefault();
????????}
????}
????startX = e.originalEvent.changedTouches[0].pageX,
????startY = e.originalEvent.changedTouches[0].pageY;
});
$("#bigImg .img_item").on("touchend", function(e) {
????// 判斷默認(rèn)行為是否可以被禁用
????if (e.cancelable) {
????// 判斷默認(rèn)行為是否已經(jīng)被禁用
????????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('上滑');
????}
});
效果圖
