文本幻灯片不起作用

Text Slideshow is not working

本文关键字：不起作用 幻灯片 文本      更新时间：2023-09-26

我正在尝试制作一个"幻灯片"来更改div中的文本。当显示最后一个div时，下一个要显示的div应该是第一个。如果正在显示第一个div，并且您单击以查看前一个，则幻灯片应显示最后一个div。但它不起作用。

这是代码：

HTML:

<div name="div-default" class="div-default">
    <?php
        echo "$name";
    ?>
</div>
<div id="div01" class="title-result active">
    <?php
        echo "Seu número de Personalidade é: $numerologia[0]";
    ?>
</div>
<div id="div02" class="title-result">
    <?php
        echo "Seu número de Destino é: $numerologia[1]";
    ?>
</div>
<div id="div03" class="title-result">
    <?php
        echo "Seu número de Lição de Vida é: $numerologia[2]";
    ?>
</div>
<div id="div04" class="title-result">
    <?php
        echo "O que sua data de Nascimento diz sobre você? $numerologia[3]";
    ?>
</div>
<div class="btm-box">
    <button  id="preview" class="change-div"></button>
    <button " id="next" class="change-div"></button>
</div>

脚本：

jQuery(document).ready(function() {
    (function ($) {
        var a = $('.active').attr('id');
        //If I do not use the two conditions below, the code works partially, but don't do the loop.
        if (a == "div01") {
            $('#preview').on('click', function() {
                $('.active').removeClass('active');
                $("#div04").addClass('active');
            });
            $('#next').on('click',function() {
                $('.active').removeClass('active').next().addClass('active');
            });
        }
        if (a == "div04") {
            $('#next').on('click',function() {
                $('.active').removeClass('active');
                $("#div01").addClass('active');
            });
            ('#preview').on('click',function() {
                $('.active').removeClass('active').prev().addClass('active');
            });
        }
        $('#next').on('click',function() {
            $('.active').removeClass('active').next().addClass('active');
        });
        $('#preview').on('click',function() {
            $('.active').removeClass('active').prev().addClass('active');
        });
    })(jQuery);
});

有人能帮我修吗？

我注意到的第一件事是，您将id变量设置为document ready，这意味着它将始终为"div01"，永远不会更改。

jQuery(document).ready(function() {
    (function ($) {
        var a = $('.active').attr('id'); // a will always = div01

此外，if块只在文档准备好时命中一次，因此在第一次之后永远不会检查它是什么id。
您还将为每个按钮指定两个不同的单击事件，一个在if块中，另一个在if块下方。这可能会导致它跳过一张幻灯片，因为它正在触发两个不同的点击事件，这两个事件都会改变活动幻灯片的内容

你需要做的是在点击事件中分配你的id，这样每次你点击其中一个按钮时它就会改变。你还需要在点击事件中做if块。

// next button click event 
    $('#next').on('click',function() {
         var a = $('.active').attr('id');
         if (a == "div04"){
              $('.active').removeClass('active');
              $("#div01").addClass('active');
         }
         else{
              $('.active').removeClass('active').next().addClass('active');
         }
     });

这是最后的代码。

$(function(){
     $('#next').on('click',function() {
          var a = $('.active').attr('id');
          if (a == "div04"){
               $('.active').removeClass('active');
               $("#div01").addClass('active');
          }
          else{
               $('.active').removeClass('active').next().addClass('active');
          }
     });
     $('#preview').on('click',function() {
          var a = $('.active').attr('id');
          if (a == "div01"){
               $('.active').removeClass('active');
               $("#div04").addClass('active');
          }
          else{    
               $('.active').removeClass('active').prev().addClass('active');
          }
     });
});

下面是一个工作的jsfiddle示例

以下是另一种无需检查id即可完成的方法。

$(function(){
    var slides = $(".slide"); // gets all elements with the slide class
    $("#next").click(function(){
        var $active = $(".active");
        $active.removeClass("active");
        if($active.next(".slide").length > 0) // Check if next element exists
            $active.next(".slide").addClass("active");
        else
            $(slides[0]).addClass("active");  // Make first slide active
    });
    $("#prev").click(function(){
        var $active = $(".active");
        $active.removeClass("active");
        if($active.prev(".slide").length > 0) // check if next element exists
            $active.prev(".slide").addClass("active");
        else
            $(slides[slides.length -1]).addClass("active"); // Make last slide active
    }); 
});

下面是工作的jsfiddle示例

相关文章：