Question

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

小提琴：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>

Answer 1

更改：

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');
}

Answer 2

你的代码非常复杂，有很多错误，所以我只是要重写整个内容。

首先，您会注意到我为图片使用了对象，以便您可以为每张图片关联var names = ["Ben", "Joel", "Judy", "Anne"]; var scores = [88, 98, 77, 88]; var average; var total = 0; var highestScore = 0; var $ = function (id) { return document.getElementById(id); }; var displayResults = function () { for (var i = 0; i < scores.length; i++) { total = total + scores[i]; //both are numbers so adds if (scores[i] > highestScore) { highestScore = scores[i]; } } //then calculate the average and display average = parseInt(total/scores.length); document.getElementById("results_header").innerHTML = ("Results"); document.getElementById("results").innerHTML = ("\nAverage score is " + average + "\nHigh score = Name here with a score of " + highestScore); }; window.onload = function () { //$("add").onclick = addScore; $("display_results").onclick = displayResults; //$("display_scores").onclick = displayScores; };和图片info网址。

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

点击运行代码段以查看全部工作

＆＃13;

loopImages

＆＃13;

// 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)

＆＃13;

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;
}

＆＃13;

Javascript：counter on If Else在数组循环中没有执行

2 个答案: