如何在JavaScript中使用图像源数组更改图像

how to change image in JavaScript using an array of image sources

本文关键字：图像 数组 JavaScript      更新时间：2023-09-26

下面是我的HTML代码:

var picList = ["http://www.acidre.com/dummy/16:9x1080", "http://www.nexusnetsolutions.com/image/product.png", "http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png"];
 function nextPic() {
   var cur = 0;
   var f = 0;
   var x = document.getElementById("pics").src;
   for (cur = 0; cur < picList.length; cur++) {
     if (x == picList[cur]) {
       f = 1;
       break;
     }
   }
   if (f == 1) {
     if (cur < picList.length - 1) {
       document.getElementById("pics").src = picList[cur + 1];
     }
   }
 }
 function prevPic() {
   var cur = 0;
   var f = 0;
   var x = document.getElementById("pics").src;
   for (cur = 0; cur < picList.length; cur++) {
     if (x == picList[cur]) {
       f = 1;
       break;
     }
   }
   if (f == 1) {
     if (cur > 0) {
       document.getElementById("pics").src = picList[cur - 1];
     }
   }
 }
header {
  position: absolute;
  display: block;
  background: cyan;
  height: 150px;
  width: 1350px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
  color: white;
  position: absoute;
  padding-left: 450px;
  padding-top: 15px;
  font-family: 'Cabin', sans-serif;
  font-size: 50px;
  font-variant: small-caps;
}
#pics {
  margin-top: 170px;
  margin-left: 270px;
}
#bnext {
  position: absolute;
  margin-left: 100px;
  margin-top: 400px;
  width: 80px;
}
#bprev {
  position: absolute;
  margin-left: -980px;
  margin-top: 400px;
  width: 80px;
}
<header>
  <h1>Image Showcase</h1>
</header>
<img id="pics" src="http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png" alt="Forms" width="800px" height="500px"></img>
<button id="bnext" type="button" onclick="nextPic()">Next</input>
  <button id="bprev" type="button" onclick="prevPic()">Previous</input>

单击"下一步"answers"上一步"按钮时什么也没有发生。我不明白为什么…如果有人能给出一个解决方案，我会很有帮助的

为什么要检查图像源?

if (x == picList[cur]) {
   f = 1;
   break;
 }

和我看不出你在哪里改变了你的图像，除了在某些情况下:

 if (cur ...) {
   document.getElementById("pics").src = ...;
 }

这些都是不必要的。您只需要根据数组内容切换图像，并添加您的条件以防止'undefined'数组索引。

下面是一个简单的工作示例代码: 
<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Image Showcase</h1>
</header>
<img id="pics" src="http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png" alt="Forms" width="800px" height="500px"></img>
<button id="bnext" type="button">Next</input>
  <button id="bprev" type="button">Previous</input>
<script>
(function(){
 var images = ["http://www.w3schools.com/images/w3schoolscom_gray.gif", "none"];
 var index = 0;
 function prevImage() {
  index--;
  index = index < 0 ? 0 : index;
  return images[index];
 }
 function nextImage() {
  index++;
  index = index >= images.length ? images.length - 1 : index;
  return images[index];
 }
 document.querySelector("#bprev").onclick= function() {
  document.querySelector("#pics").src = prevImage();
 }
 document.querySelector("#bnext").onclick= function() {
  document.querySelector("#pics").src = nextImage();
 }
})();
</script>
</body>
</html>


var picList = ["http://allwebco-templates.com/support/picts/sample-image.jpg",
  "http://mfs1.cdnsw.com/fs/cc0/normal/cx0ms-193.jpg",
  "https://freethumbs.dreamstime.com/114/big/free_1145336.jpg",
  "http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg"
];
var currentIndex = 0;
var pic = document.getElementById("pics");
function nextPic() {
  pic.src = picList[(currentIndex++) % picList.length];
}
function prevPic() {
  if (currentIndex == 0)
    currentIndex = picList.length - 1;
  else
    currentIndex = currentIndex - 1;
  pic.src = picList[currentIndex];
}
header {
  position: absolute;
  display: block;
  background: cyan;
  height: 150px;
  width: 1350px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
  color: white;
  position: absoute;
  padding-left: 450px;
  padding-top: 15px;
  font-family: 'Cabin', sans-serif;
  font-size: 50px;
  font-variant: small-caps;
}
#pics {
  margin-top: 170px;
  margin-left: 270px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Image Showcase</title>
  <link rel="stylesheet" type="text/css" href="imgShow.css"></link>
  <script src="imgShow.js"></script>
</head>
<body>
  <header>
    <h1>Image Showcase</h1>
  </header>
  <img id="pics" src="http://allwebco-templates.com/support/picts/sample-image.jpg" alt="Forms" width="300px" height="200px" /></img>
  <button id="bnext" type="button" onclick="nextPic()">Next</input>
    <button id="bprev" type="button" onclick="prevPic()">Previous</input>
</body>
</html>

Html for you button不正确，更改为。

<button id="bnext" type="button" onclick="nextPic()">Next</button >
<button id="bprev" type="button" onclick="prevPic()">Previous</button>

下面是一个稍微不同的示例。一件事是，我在JS文件中删除了调用，而不是内联调用prevPic() nextPic()。

JS 

var picList = [
        'http://orig10.deviantart.net/78b3/f/2009/025/0/0/0044146485035ccdcc4f99a681af80c6.jpg',
        'http://pre15.deviantart.net/39b2/th/pre/i/2012/221/3/3/square_2_by_lilith1995-d5ag32b.jpg',
        'http://img15.deviantart.net/4e63/i/2010/188/6/c/fly__fly_away___sqaure_crop_by_tagirocks.jpg',
        'http://img13.deviantart.net/036f/i/2016/287/c/3/harley_quinn_by_mz09-dakslb5.jpg',
    ];

function imageShowCase(list) {
    var cur = 0;
    var img = document.getElementById('pics');
    /* Use controls element to delegate from buttons */
    var controls = document.getElementById('controls');
    /* Update the image src */
    var update = function(index) {
        img.src = list[index];
    };
    /* Count up on the current index, reset to 0 if reaced the total length of array */
    var next = function() {
        cur = (cur < list.length - 1) ? (cur + 1) : 0;
    };
    /* Count down, reset to length of array, minus 1 */
    var prev = function() {
        cur = (cur === 0) ? (cur = list.length - 1) : cur - 1;
    };
    /* Delegate to the controls elememt */
    controls.addEventListener('click', function(e) {
        /* Stop any event bubling */
        e.stopPropagation();
        /* Check which element was clicked by comparing IDs */
        if      (e.target.id === 'bnext') { next(); }
        else if (e.target.id === 'bprev') { prev(); }
        else { return; }
        /* Render the image with new src */
        update(cur);
    }); 
}
imageShowCase(picList);
CSS 

header{
    display: block;
    background: cyan;
    height: 150px;
    width: 1350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1{
    color: white;
    position: absoute;
    padding-left: 450px;
    padding-top: 15px;
    font-family: 'Cabin', sans-serif;
    font-size: 50px;
    font-variant: small-caps;
}
.wrapper {
    margin: 0 auto;
    max-width: 400px;
}
#pics{
    width: 100%;
}
#bnext{
    width: 80px;
}
#bprev{
    width: 80px;
}
HTML 

<header>
    <h1>Image Showcase</h1>
</header>
<div class="wrapper">
    <div id="controls">
            <button id="bprev" type="button">Previous</button>
            <button id="bnext" type="button">Next</button>
    </div>
    <br>
    <img id="pics" src="http://orig10.deviantart.net/78b3/f/2009/025/0/0/0044146485035ccdcc4f99a681af80c6.jpg"/>
</div>
相关文章：