Question

<ul id="ulBack">
   <li><img data-src="coffee/01.jpg" class="place"></li>
   <li><img data-src="coffee/02.jpg" class="place"></li>
   <li><img data-src="coffee/03.jpg" class="place"></li>   
</ul>



 $('#btnNext').click(function () {
        $('#slide').hide();
        if (n < xlen) {n+=1;}
        else {n=0};
        change();
        border();
    });

function change(){
    var goImg = $('#ulBack img' + ':eq(' + n +')').attr('data-src');
    $('#slide').attr('src', goImg);
};

在border()函数结束时，我有：

$('#slide').show();

所以，我想首先隐藏幻灯片，然后做所有其他事情，最后 - 显示幻灯片。

但是，很明显，在点击下一个按钮后，程序会等待某些东西，可能执行其余的代码，然后，最后，快速隐藏并显示幻灯片，这不是意图。

您可以看到here

Answer 1

我想我明白了：你处理的最长的部分是我想要获得新图像的请求，为此你使用jQuery Ajax查询不是吗？

我认为您的Ajax查询是异步，因此在加载新图片之前，会在旧图片上调用show（）。这让您感觉图片永远不会隐藏。要解决它，请使ajax请求同步：

$.ajax({
  ...,
  async: false
})

Answer 2

你是这样做的：

function change(){
    var goImg = $('#ulBack img' + ':eq(' + n +')').attr('data-src');
    $('#slide').one('load', function() {
        $(this).show();
    }).attr('src', goImg).each(function() {
        if(this.complete) $(this).load();
    });
}

function border() {
    if([0,1,2,3,4,10,33,37].indexOf(n) != -1){
        $('#slide').css('border', 'none');
    } else {
        $('#slide').css('border', 'medium ridge #6c9');
    }
}

Answer 3

这可能会有所帮助..不确定这是否是你想要的

  $('#slide').hide();
        if (n < xlen) {n+=1;}
        else {n=0};
        change();
        border();
    setTimeout(function() { $("#slide").show(); }, 5000);

hide（）函数在需要时不会隐藏图像

3 个答案: