图片轮播(手动点击)

  var m = 0;
//console.log($(this).attr('src'));
var src = $(this).attr('src');
var mask = '<div class="mask" style=" 100%;height: 100%;position: fixed;top:0;z-index: 2"></div>';
$('body').append(mask);
var img = '<img class="showImg" style="100%;position:absolute;top:0;bottom:0;height:auto;margin:auto" src="'+src+'"/>';
$('.mask').append(img); //图片
$('.mask').append('<span id="none" style="color:#FFF;font-size: 30px;cursor: pointer;position: absolute;right:5px;">&times;</span>'); //消失按钮
$('.mask').append('<div style="color: #FFF;font-size: 20px;text-align: center;margin-top: 5px"><span>1</span>/'+data.images.length+'</div>');
$('.mask').append('<div id="left">&lt;</div><div id="right">&gt;</div>');
$('#left,#right').css({
'font-size':'30px',
'color':'#FFF',
'position':'absolute',
'top':'50%',
'margin-top':'-20px',
'cursor':'pointer'
});
$('#left').css('left','5px');
$('#right').css('right','5px');
//消失图片
$('#none').click(function(){
$('.mask').remove();
});
$('#left').click(function(){
m--;
if(m < 0){
m = data.images.length - 1;
}
$('.showImg').attr('src',data.images[m]);
$('.mask div span').text(m+1);
});
$('#right').click(function(){
m ++;
if(m >= data.images.length){
m = 0;
}
$('.showImg').attr('src',data.images[m]);
$('.mask div span').text(m+1);
})
});
 
 
原文地址:https://www.cnblogs.com/mo-cha/p/6039556.html