Question

我有一个基于图像数组的图像幻灯片，这些图像在我的页面上提供单个img元素。当我到达最后一个图像并按下“next”时触发nextImage（）函数，我想隐藏我的最终图像并调出一个启动画面（同一页面上的div，由css隐藏）。此代码在safari中运行良好，但它似乎不会隐藏iPad（我的目标设备）上的图像元素。我不知道可能导致这种情况无效的原因。

function endPresentation(){
    $("#image").hide(200);
    $("#test").show(200);
}

//Goto Next image in array
function nextImage(){

    save();
    iCount++;

//If there are no more images in the array
    if (images[iCount] == null) {
        endPresentation();
    }
    else{                       
        //Change image source to new image, do stuff after the image has successfully loaded
        $("#image").attr("src", images[iCount]).load(function (){               
            doStuff();  
        });         
    }               
}

任何帮助都会非常感激，因为这已经困扰了我几个星期！

Answer 1

尝试将style="display:none"添加到html中的#image元素，而不是使用jquery隐藏元素。这应该使jquery更容易切换图像的可见性。

Answer 2

我想尝试的是简单地使用iCount隐藏最后显示的图像在你的“if”语句中 - 回到你最后的现有图像，之后我会在必要时删除带有.remove的div（）;希望它有效！

因此，您检查iCount是否为空。如果是，iCount--，隐藏（200）它，如果有必要，你在动画结束后用.parent（'#image'）删除#image。（您可能需要仔细检查语法）。

Answer 3

在调用hide和show方法时解决了添加10毫秒超时的问题：

function endPresentation(){
  setTimeout(function(){
      $("#image").hide(200);
      $("#test").show(200);
  },10)
}

在iPad 4上测试

.hide（）在iPad上无法正常工作

3 个答案: