Question

这是我到目前为止尝试过的方法，但是它只是一次显示所有元素：

i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');

myarr = [i1,i2,i3,i4,i5];
    for (i=0; i<myarr.length;i++) {  
       $(myarr[i]).show().delay(5000).fadeOut();

    }

Answer 1

我认为您正在尝试实现无限循环。

我认为您应该在这种情况下使用间隔，并对元素进行fadeOut / fadeIn。

i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');

let myarr = [i1, i2, i3, i4, i5];
let active = 1;

setInterval(() => {
  $(myarr[active - 1]).fadeOut(500)
  if (active >= myarr.length) {
    active = 0
  }
  setTimeout(() => {
    $(myarr[active]).fadeIn(500);
    active = active + 1;
  }, 500)
}, 5000)

这样做是每5秒钟将元素更新到下一个元素，如果到达末尾，则会将其重置为零。

签出此fiddle

Answer 2

您可以使用async和await。

您可以改善的另一点是。您可以为要连续显示的所有图像添加相同的类。如果要按ID选择全部，则可以使用“属性选择器”。

const myarr = document.querySelectorAll('img[id^=img]');

我使用的是同一课程，而不是id

const arr = [...document.querySelectorAll('.test')];

(async function(){
    for (let i=0; i<arr.length;i++) {  
       await new Promise(res => {
          setTimeout(() => {
            $(arr[i]).show().fadeOut();
            res();
          },2000)
       }) 
    } 
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">Test 1</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>

Answer 3

let count = 1;

setInterval(()=>{
document.querySelectorAll("*[id*='img_']").forEach((elem)=> elem.style.display="none");
document.getElementById(`img_${count}`).style.display="";
if(count<4) count++;
else count = 1;
},1000)

<div id="img_1">Image 1</div>
<div id="img_2" style="display:none">Image 2</div>
<div id="img_3" style="display:none">Image 3</div>
<div id="img_4" style="display:none">Image 4</div>

香草Javascript解决方案！

Answer 4

您忘了在淡出后显示元素。在这里您可以实现它：

// show first element
$('img').eq(0).show();
$('img').each(function () {
  // your delay
  $('img').delay(5000).fadeOut();
  // make sure next element is image
  if ($(this).next()[0].tagName === 'IMG') {
      // show next element
      $(this).next().fadeIn();
  }
});

img {
  display: none;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://picsum.photos/id/5/50" />
<img src="https://picsum.photos/id/10/50" />
<img src="https://picsum.photos/id/30/50" />
<img src="https://picsum.photos/id/0/50" />
<img src="https://picsum.photos/id/150/50" />
<img src="https://picsum.photos/id/1000/50" />

Answer 5

var basicVal =0;
$(document).ready(function(){
   $('.wrapper img').eq( basicVal ).show();
   var setTime =setInterval(function(){
     if( basicVal < $('.wrapper img').length -  1){
       $('.wrapper img').eq(basicVal ).hide(); 
       basicVal++;
       $('.wrapper img').eq(basicVal).show();
     }else{
       clearTimeout(setTime);
     }    
     console.log();
     
   }, 5000);
});

.wrapper{
  width: 100%;
  float: left;
}
.wrapper img{
  width: 50%;
  height: 300px; 
  object-fit:  cover;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"> 
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="http://www.desktopwallpaperhd.net/wallpapers/0/4/landscapes-wallpaper-fengguangbizhi-fengjingbizhi-picture-image-1316.jpg" alt="">
<img src="http://trustbanksuriname.com/wp-content/uploads/2019/04/pony-picture-guide-to-native-pony-breeds-little-pony-cartoon-pictures.jpg" alt="">
<img src="https://www.bigfoto.com/stones-background.jpg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQulscf1nNOpaI1tElZgKTTSAl_ZcL_i1VwLDojgKzqjSTMofsqPw" alt="">
  
  </div>

检查一下，我使用一些jquery和setInterval函数每隔5000ms更改一次

Answer 6

您可以使用setTimeout来达到此效果。

<div id="container">
    <div class="block" id="img_1"></div>
    <div class="block" id="img_2"></div>
    <div class="block" id="img_3"></div>
    <div class="block" id="img_4"></div>
    <div class="block" id="img_5"></div>
</div>


.block{
    width:100px;
    height:100px;
    display: inline-block; 
    margin:10px;
    background: lightblue;  
    visibility: hidden;
}

然后

$('.block').each(function(index, value) {  
    setTimeout(function() {
       $(value).css("visibility", "visible");
             $(value).show().delay(1000).fadeOut();
    }, 2000 * (index + 1));
});

显示一个元素5秒钟，然后隐藏并显示下一个元素

6 个答案: