Question

嘿伙计们我一直在使用堆栈溢出来帮助我自己编写代码，但我认为我必须缺少一些基本原则，因为当我试图找到我喜欢的滑块时，我无法弄清楚它是如何工作的。所以我试着让自己弄清楚方法和规则，但现在我已经完成了一个完整的墙。我正在尝试制作一个滑块，开始只是在图像中循环，一旦我有了工作，我就会弄清楚按钮和东西。

无论如何这里是测试文件的HTML：

<div id=slider>
      <img class="active" src="Slider 1.jpg"/>
      <img src="Slider 2.jpg"/>
      <img src="Slider 3.jpg"/>
</div>

CSS：

 #slider{
     position: relative;
 }
 img {
     opacity: 0;
     position: absolute;
 }

和Javascript：

$(document).ready(function(){
    var repeater;
    var $active = $("img.active");
    var $next = $active.next();
    var $noNext = $("#slider:first-child");
    $active.css('opacity','1');

    function changeSlide(){
        if ($next) {
            $active.fadeToggle();
            $next.fadeToggle();
            $active.removeClass('active');
            $next.addClass('active');
        }
        else {
            $active.fadeToggle();
            $active.removeClass('active');
            $noNext.addClass('active');
            $noNext.fadeToggle;
        }
    }

    function timer(){
        changeSlide();
        repeater=setTimeout(timer(), 1000);
    }

    timer();
});

基本上我试图让它如果在当前图像之后没有另一个图像那么它将默认为第一个图像并再次运行。但是目前它确实将第二个图像更改为活动状态并从第一个图像中删除该类，但它所做的只是无休止地淡入和淡出第一个图像。我知道我错过了一些非常简单的东西，但我对这门语言比较陌生，所以我需要一些帮助来解决这个问题吗？

先谢谢你们！

PB084

我需要制作一个淡入/淡出滑块，但我已经撞墙了

0 个答案: