JQuery 的多个滑块和数组

Question

我正在尝试构建一个滑块，它可以根据在地图上单击的区域更改图像。我想用数组在js文件中存储图像，而不是在HTML中列出它们。然而，控制台报告“imageArray[imageIndex]:1 GET http://localhost:8000/imageArray[imageIndex] 404 (File not found)”

HTML

<div class="container">
<img id="mainImage" src="Photos/OG/P1000609.JPG" style="width:100%">
<button onClick="changeImage()">next</button>

JQuery


var imageArray = ["Photos/OG/P1000389.jpg", "Photos/OG/P1000409.jpg","Photos/OG/P1000589.jpg"];
var imageIndex =0;

function changeImage(){
$("#mainImage").attr("src", "imageArray[imageIndex]");
imageIndex ++;
sliderLenght = imageArray.lenght;
if (imageIndex> sliderLenght) {imageIndex = 0}
};


function changeArray(e){
    imageArray = e
}

var region1Array= ["Photos/OG/P1000412.jpg", "Photos/OG/P1000414.jpg"];

$("#region1").click(changeArray(region1Array));

我尝试替换图像和文件夹，但它不起作用。有没有办法让它使用数组工作，或者甚至只是找到这个数组？

Answer 1

由于您的图像路径存储在数组 imageArray 中，您应该直接将其分配给 attr()。不要用引号或双引号括起来。

除此之外，JavaScript数组长度应该是array.length，但是你的代码写错了lenght。

在下面的代码片段中，我更改了机制，首先响应点击更改索引，然后将 imageArray 的当前索引（更新后）的元素分配给 src 属性img 元素。

var imageArray = ["https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg", "https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_2560%2Cc_limit/so-logo-s.jpg"];
var imageIndex =0;

function changeImage(){
  var sliderLenght = imageArray.length;
  if (imageIndex < sliderLenght - 1) {
    imageIndex++;
  } else imageIndex = 0;
  
  $("#mainImage").attr("src", imageArray[imageIndex]);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <img id="mainImage" src="https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg" style="width:100%">
  <button onClick="changeImage()">next</button>
</div>

除此之外，您可以通过删除 button 上的 onClick 属性并在 Javascript

上添加点击事件侦听器来改进代码

var imageArray = ["https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg", "https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_2560%2Cc_limit/so-logo-s.jpg"];
var imageIndex =0;

$('#button').click(() => {
  var sliderLenght = imageArray.length;
  if (imageIndex < sliderLenght - 1) {
    imageIndex++;
  } else imageIndex = 0;
  
  $("#mainImage").attr("src", imageArray[imageIndex]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <img id="mainImage" src="https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg" style="width:100%">
  <button id="button">next</button>
</div>

JQuery 的多个滑块和数组

Multiple sliders with JQuery with arrays

javascript

arrays

jquery

slider