Javascript:数组循环中If Else上的计数器未执行

Javascript: counter on If Else in array loop not executing

本文关键字：计数器 执行 Else If 数组 循环 Javascript      更新时间：2023-09-26

我想根据显示的图像显示一行文本。我在计数器上做了一个console.log，它似乎和图像一样循环良好，但我无法根据计数器的数字显示文本行。

Fiddle：http://jsfiddle.net/jzhang172/RwjFX/7/

var imagesArray = ["http://vignette2.wikia.nocookie.net/pokemon/images/e/ef/025Pikachu_Pokemon_Mystery_Dungeon_Red_and_Blue_Rescue_Teams.png/revision/latest?cb=20150105233050",
"http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
"http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
"http://www.pokemonxy.com/_ui/img/_en/art/Fennekin-Pokemon-X-and-Y.jpg",
"http://www.pokemon20.com/assets/img/mythical/arceus/poke_arceus.png"];
function loopImages(count) {
var counter = count % imagesArray.length;
  $('img').attr('src', imagesArray[counter]);
  $('#firstStar').fadeIn(500, function(){
    $('#firstStar').delay(500).fadeOut(500, loopImages.bind(null, count + 1));        
  });
  console.log(counter);
if (counter=1){
$('#imageInfo').html('One');
}
else if (counter=2){
$('#imageInfo').html('Two');
}
}
loopImages(0);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.kingdomhearts.com/2_8/images/logos/kingdom_hearts_birth_by_sleep_logo.png" id="firstStar">
<p id="imageInfo">
</p>

更改：

if (counter=1){
$('#imageInfo').html('One');
}
else if (counter=2){
$('#imageInfo').html('Two');
}

收件人：

if (counter==1){
$('#imageInfo').html('One');
}
else if (counter==2){
$('#imageInfo').html('Two');
}

您的代码非常复杂，有很多错误，所以我只想重写整个代码。

首先，您会注意到我为图像使用了Objects，这样您就可以为每个图像关联info和图像src url。

接下来，我极大地简化了循环，并通过添加有用的参数使其更加可重用。现在，在任何元素和图像集上使用loopImages都是微不足道的。如果你愿意，你甚至可以在同一页上运行多个幻灯片。

点击运行代码片段查看所有工作

// each image is {info: "image description", src: "http://imageurl"}
var images = [
  {info: "Pikachu", src: "http://vignette2.wikia.nocookie.net/pokemon/images/e/ef/025Pikachu_Pokemon_Mystery_Dungeon_Red_and_Blue_Rescue_Teams.png/revision/latest?cb=20150105233050"},
  {info: "Squirtle", src: "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png"},
  {info : "Bulbasaur", src: "http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png"},
  {info: "Vulpix", src: "http://www.pokemonxy.com/_ui/img/_en/art/Fennekin-Pokemon-X-and-Y.jpg"},
  {info: "Arceus", src: "http://www.pokemon20.com/assets/img/mythical/arceus/poke_arceus.png"}
];
// loopImages has parameters to control
//   elem: which element to target in the dom
//   images: the array of images
//   counter: the initial image to display; 0 for the first image
//   delay: the amount of time (in milliseconds) between each image
function loopImages(elem, images, counter, delay) {
  var image = images[counter % images.length]
  var imageElem = elem.querySelector('.image')
  var infoElem = elem.querySelector('.image-info')
  imageElem.setAttribute('src', image.src)
  infoElem.innerHTML = image.info
  
  // use setTimeout to repeat the loop with an incremented counter
  window.setTimeout(loopImages, delay, elem, images, counter + 1, delay)
}
loopImages(document.querySelector('#slideshow'), images, 0, 1000)
body {
  background-color: #eee;
}
#slideshow {
  width: 20%;
  padding: 1rem;
  background-color: white;
  margin: 0 auto;
}
#slideshow .image {
  width: 100%;
  max-width: 100%;
}
#slideshow .image-info {
  text-align: center;
}
<div id="slideshow">
  <img class="image">
  <p class="image-info"></p>
</div>

相关文章：