我正在制作一个模式,以更大的形式向客户端显示图像以供查看。然后向左滑动,然后在单击时从左侧滑入新图像。当我单击页面上的缩略图时,它会完美地显示在模式中。但是当我单击第一个显示图像的模式时,它返回 null 并且左侧设置关闭。但是当我点击新图像时,一切都很好,并且从那里开始完美运行。为什么它返回 null 以及如何停止它。
代码
$( '#modal img').live('click',function(e){
var index = $(this).attr('img_index');
var img_og = $( '#viewer ul li img[img_index="' + index + '"] ');
var imgOgWidth= img_og.width();
index++;
if(index > $( '#viewer ul li img').length ) {index = 0;}
var left = ($( window ).width() - imgOgWidth )/ 2;
var src = img_og.attr('src');
console.log($( window ).width() + " - " + img_og.width() + " = " + left);
$(this).animate({"left":'-2000px'},300,function(){
$(this).attr({'src':src,'img_index':index}).css({'width':imgOgWidth,"left":'2000px'}).animate({'left':left},300);
});
});
控制台日志
1288 - null = 644
1288 - 470 = 409
1288 - 900 = 194
1288 - 900 = 194
1288 - 900 = 194
HTML
<div id="modal" class="none">
<img src="" img_index="" />
</div>