Question

我正在开发一个Html页面，我有两个div。在每个div我有一个图像。我想每个图像应该可见2秒钟，之后第二个div应该可见。这个功能应该重复。为此，我使用了以下代码。

<script type="text/javascript">
 $( document ).ready(function() {
     $(".logo-outer").show();
     setTimeout(function () {
         $(".logo-outer").hide();
         $(".logo-outernew").hide();
     }, 2000);
 });
 </script>

但是上面的代码不起作用，图像不可见或不可见。

Answer 1

您可以使用SetInterval函数而不是超时函数

下面是示例代码，它现在可能正常工作请检查正确的功能。要点是利用区间函数

var myInterval = setInterval(function () {
      if($(".logo-outer").is(':visible'))
       {
             $(".logo-outer").hide();
             $(".logo-outernew").show();
       }
       else
       {
             $(".logo-outer").show();
             $(".logo-outernew").hide();
       }
        },2000);

如果你想停下来 clearInterval（myInterval）;

Answer 2

 setInterval(function () {
     if ($(".logo-outer").css("display") == "none"){
        $(".logo-outer").show();
     }
     else{
        $(".logo-outer").hide();
     }
 }, 2000);

每隔2秒运行一次功能，如果徽标外部不可见，它将显示它，否则如果它可见，它将隐藏它。

Answer 3

我相信您在隐藏显示它的第二个图像时也会出错（在setTimeout内部）：

     $(".logo-outer").hide();
     $(".logo-outernew").hide();

我相信第二个应该是$(".logo-outernew").show();？

Answer 4

您可以将modulo（例如%符号）运算符与全局变量一起使用，以确定您的div的时间hide或show。

var count = 0;
$( document ).ready(function() {
    $(".logo-outer").show();
    setTimeout(function () {
        if(count % 2 == 0) {
            $(".logo-outer").hide();
            $(".logo-outernew").show();
        } else {
            $(".logo-outer").show();
            $(".logo-outernew").hide();
        }
        count++;
    }, 2000);
 });

Answer 5

默认隐藏你的第二个div并且在setTimeout里面隐藏你的第一个潜水并显示你的第二个div。

  $(".logo-outer").show();
  $(".logo-outernew").hide();
     setTimeout(function () {
         $(".logo-outer").hide();
         $(".logo-outernew").show();
     }, 2000);

.logo-outer {
    background:red;
    width: 50vw;
    height: 50vw;
}
.logo-outernew {
    background:green;
    width: 50vw;
    height: 50vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-outer">
    <h1>1 div</h1>
</div>
<div class="logo-outernew">
    <h1>2 div</h1>
</div>

Answer 6

function swapImage() {
                $('.img02').fadeOut();
                $('.img01').fadeIn();
                setTimeout(function () {
                    $('.img02').fadeIn();
                    $('.img01').fadeOut();
                }, 2000);
                setTimeout(function () {
                    swapImage();
                },4000)
            }
            $(document).ready(function () {
                swapImage();
            });

.img01,
            .img02{
                width: 200px;
                height: 200px;
                position: absolute;
            }
            .img01{
                background: green;
            }
            .img02{
                background: red;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img01"></div>
<div class="img02" style="display: none;"></div>

Answer 7

删除控制台并使用隐藏和显示功能取消注释行

     var time_to_display = 2000;
        var img1 = setInterval(function () {
        console.log("Img1");
        //          $(".logo-outer").hide();
          //      $(".logo-outernew").show();
           
                }, time_to_display * 2); 
                
        setTimeout(function(){
        var img2 = setInterval(function () {
        console.log("Img2");
            //       $(".logo-outernew").hide();
             //    $(".logo-outer").show();
                }, time_to_display * 2); 
        },2000);

Answer 8

您只需将一个div的显示更改为无，并使用以下代码隐藏和显示

<script>
    $(document).ready(function(){
      setInterval(function(){
      $("div.logo-outer, div.logo-outernew").toggle(1000);
     }, 3000)
   });
</script>

如何反复显示两个div

8 个答案: