javascript - Jquery 自定义照片幻灯片同时显示所有图像而不是一个然后下一个

Question

我按照 youtube 上的教程制作了一张照片……卷轴？ ( https://www.youtube.com/watch?v=yikHrIMsccw ) 并且终生无法弄清楚为什么我的照片显示与我执行代码之前相同。它们应该在循环中每 3 秒淡入淡出。我有 8 张照片，这些照片对我的知识和对书面代码的理解应该无关紧要。

    function Slider() {
$(".photoSlider#1").show("fade", 300);
$(".photoSlider#1").delay(3000).hide("slide", { direction: 'left' }, 300);

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

setInterval(function () {
    $(".photoSlider#" + count).show("slide", { direction: 'right' }, 300);
    $(".photoSlider#" + count).delay(3000).hide("slide", { direction: 'left' }, 300);

    if (count >= sliderCount) {
        count = 1;
    } else {
        count = count + 1;
    }//end if/else statement
}, 3600);//end setinterval
}//end function slider

这是我的 javascript，来自 google 的 jqueryui 和 jquery 库 api 在我的 head 标签中。

    <div class="photoSlider">
                    <img id="1" src="~/Content/Photos/photo1.jpg" />
                    <img id="2" src="~/Content/Photos/photo2.jpg" />
                    <img id="3" src="~/Content/Photos/photo3.jpg" />
                    <img id="4" src="~/Content/Photos/photo4.jpg" />
                    <img id="5" src="~/Content/Photos/photo5.jpg" />
                    <img id="6" src="~/Content/Photos/photo6.jpg" />
                    <img id="7" src="~/Content/Photos/photo7.jpg" />
                    <img id="8" src="~/Content/Photos/photo8.jpg" />
                </div>

这是我的 slider html

    .photoSlider{
        width:600px; overflow:hidden;margin:30px auto;
        background-image:url(~/Content/Photos/loading.gif);
        background-repeat:no-repeat;
        background-position:center;
    }


    .photoSlider img {
        width:600px;
        display:none;
    }

这是我应用到 html 的 css。随着

    display:none; 

它根本不显示图片，这是它应该显示的，但是 javascript 应该使它们淡入淡出，对吗？同样根据教程，背景图像(只是一个旋转的 circle.gif)应该显示在图片后面，但是当它们不显示时，也不会显示。

Answer 1

问题(或其中一个问题)是您使用的选择器。

您正在使用 .photoSlider#1。这意味着具有 ID 1 和类 photoSlider 的元素。

您应该使用 .photoSlider #1(注意空格)。这意味着一个元素具有 ID 1，并且具有类 photoSlider 的祖先。

尽管如此，当我运行经过此修改的代码时，控制台中仍然出现错误，因此您还有更多工作要做。至少这解释了为什么根本没有图像出现。