Javascript 第一张图片没有'；t在JS/JQ SlideShow中显示

我正在尝试使用一些javaquery制作一个javascript幻灯片，第一个图像不会像它应该的那样淡入淡出，因此显然其他图像也不会滑出。这是我第一次尝试这样做，所以我不太清楚为什么它不起作用。我已经一遍又一遍地查看代码，以确保拼写正确，标点符号正确，但我想我可能还是遗漏了一些东西。不管怎样，我的代码

HTML5

javascript

function Slider(){
    $(".slider #1").show("fade",500);
    $(".slider #1").delay(5500).hide("slide", {direction: 'left'}, 500);

    var sc=$(".slider img").size();
    var count=2;

    setInterval(function(){
        $(".slider #"+count).show("slide",{direction: 'right'},500);
        $(".slider #"+count).delay(5500).hide("slide", {direction: 'left', 500);

        if(count == sc){
            count = 1;
        }else{
            count = count + 1;  
        }
    }, 6500);
}

---

因此，您的JS有几个方面可能是问题所在。首先，一个快速的JShint告诉我有一些语法错误（缺少分号等等）。但我认为真正的问题是，您正在使用这些方法中的一些非默认度量值，但没有定义新的度量值

例如，

.hide（）

没有“幻灯片”。我将通读

.show（）

和

.hide（）

的api，您可能需要将它们替换为

.animate（）

这里有一个可能适合您的解决方案：

HTML:

---

我使用

setTimeout（）

而不是

setInterval（）

，因为个人偏好（interval可能与函数调用重叠）。在我的示例中，您还可以删除

.fadeIn（）

，并将其替换为

.animate（）

，以获得所需的水平滑动效果。

在JSFIDLE中查看此内容并删除所有JSFIDLE不需要的额外内容后，我注意到您缺少一个右括号。我不明白您为什么不能获得控制台错误，因为这是一个语法错误：

function Slider() {
    $("#a1").show("fade",500);
    $("#a1").delay(5500).hide("slide", {direction: 'left'}, 500); 
}

---

您是遗漏了一些代码还是没有关闭

标记？我遗漏了一些代码，另一个代码只是带有导航菜单的标题，div包含在一个节标记中，但我认为这不应该影响幻灯片。加载页面时控制台中有错误吗？没有，我有一个gif的背景，作为一个加载符号的工作，并显示出来，到处走。只有第一个图像不会消失。另外，在

setInterval

函数中，您在传递给

的参数上缺少了一个右括号
。hide

我建议先创建一个JSFIDLE并在那里测试它，看看是否返回了错误，因为我已经识别了2个语法错误。您的显然是在JSFIDLE中工作的，但这仍然不是我工作中的第一张照片。谢谢你花时间来帮助我。@SecretWalrus，如果它在小提琴中工作，但不是在你的本地环境中，我会做的是注释掉你的所有代码，并逐个取消注释每一位，然后找到它的断点。既然你知道它应该能工作，我想它根本就不涉及我的java，我试着用我的代码来创建一个全新的网站，但它仍然不能吸收我的代码。我不知道怎么了。这听起来可能是个愚蠢的问题，但你确定你正在加载jQuery吗？试着进入开发者工具，看看控制台中是否有任何错误，等等。老实说，我不知道我是否正在加载jQuery。这两行代码不就是这么做的吗？修正了这个错误，它仍然不能在第一张图片中显示。badAdviceGuy有一个有效的解决方案，我会看看他的小提琴示例。我的解决方案和小提琴也起作用。如果您想让我们为您解决代码故障，请创建一个提琴供我们测试。

function Slider(){
    $(".slider #1").show("fade",500);
    $(".slider #1").delay(5500).hide("slide", {direction: 'left'}, 500);

    var sc=$(".slider img").size();
    var count=2;

    setInterval(function(){
        $(".slider #"+count).show("slide",{direction: 'right'},500);
        $(".slider #"+count).delay(5500).hide("slide", {direction: 'left', 500);

        if(count == sc){
            count = 1;
        }else{
            count = count + 1;  
        }
    }, 6500);
}

  <div class="slider">
     <img id="1" src="http://www.placehold.it/500x300&text=Slide1" alt="TV Deals"/>
     <img id="2" src="http://www.placehold.it/500x300&text=Slide2" alt="Furniture Deals"/>
     <img id="3" src="http://www.placehold.it/500x300&text=Slide3" alt="Electronic Deals"/>
  </div>

$(document).ready(function () {
    slider();
});

function slider(){
    var count = 1;

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

    (function slide(){
        $('.slider img').hide();

        if (count > 3) {count = 1;} // makes this a loop

        $('#'+count).fadeIn('slow');
        count += 1;

        setTimeout(function () {
            slide();
        }, 5000);
    })();
}

function Slider() {
    $("#a1").show("fade",500);
    $("#a1").delay(5500).hide("slide", {direction: 'left'}, 500); 
}