jqurey相册放大浏览效果。
阅读原文时间:2023年07月16日阅读:2

/*图片弹窗与切换*/
function honorLayer(){
var honorArray = honorArr();
var $msk = $('.js-mask'),$layer = $('.js-honor-layer'),$close = $('.js-hl-close');
var $honorpic = $('.js-honorpic');
var $showpic = $('#js-honorshow');
var showpic = document.getElementById('js-honorshow')
if(showpic) {
var showpicBg = showpic.style.backgroundImage;
showpicBgstr = showpicBg.substring(5,showpicBg.length-2);
}
var index = 0;
var $prev = $('.js-prev'),$next = $('.js-next');
$honorpic.on('click',function(){
$msk.fadeIn()
$layer.fadeIn()
var src = $(this).attr('src');
index = honorArray.indexOf(src);
$showpic.attr('data-index',index)
src='url("'+src+'")';
document.getElementById('js-honorshow').style.backgroundImage = src;
return index;
})
$close.on('click',function(){
$msk.fadeOut()
$layer.fadeOut()
})
$msk.on('click',function(){
$msk.fadeOut()
$layer.fadeOut()
})

$prev.on('click',function () {
honpicPrev()
})
$next.on('click',function () {
honpicNext()
})
}
/*图片组成数组*/
function honorArr(){
var $honorpic = $('.js-honorpic');
var honorArray = [];

for(var i=0,l=$honorpic.length;i<l;i++){
honorArray = honorArray.concat($honorpic.eq(i).attr('src'))
}
return honorArray
}
function honpicPrev(){
var honorArray = honorArr();
var $honorshow = $('#js-honorshow');
var src = '';
var e = $honorshow.attr('data-index')
e--;
if(e<0){
e=honorArray.length-1;
}
src = 'url("'+honorArray[e]+'")';
document.getElementById('js-honorshow').style.backgroundImage = src;
$honorshow.attr('data-index',e)
}
function honpicNext(){
var honorArray = honorArr();
var $honorshow = $('#js-honorshow');
var e = $honorshow.attr('data-index')
console.log(e);
var src = ''
e++;
if(e==honorArray.length){
e=0;
}
src = 'url("'+honorArray[e]+'")';
console.log(honorArray[e]);
document.getElementById('js-honorshow').style.backgroundImage = src;
$honorshow.attr('data-index',e)
}

×