Question

我正在尝试制作一个非常非常简单的图像滑块/幻灯片，并且没有自动播放功能。我只想单击即可转到下一个或上一个图像。有一些问题，您可以在下面阅读。

问题：每次我单击上一个按钮时，都会显示我的JavaScript代码

var backgroundImage = new Array();
backgroundImage[0] = "images/image1.jpg";
backgroundImage[1] = "images/image2.jpg";
backgroundImage[2] = "images/image3.jpg";
backgroundImage[3] = "images/image4.jpg";
backgroundImage[4] = "images/image5.jpg";
backgroundImage[5] = "images/image6.jpg";
backgroundImage[6] = "images/image7.jpg";

function displayAllImages() {
  var i = 0,
    len = backgroundImage.length;
  for (; i < backgroundImage.length; i++) {

    var img = new Image();
    img.url = backgroundImage[i];
    img.style.width = '160px';
    img.style.height = '120px';

    document.getElementById('images').appendChild(img);
  }
};
displayAllImages();
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function() {
  $('.active').removeClass('active').addClass('oldActive');
  if ($('.oldActive').is(':last-child')) {
    $('.sp').first().addClass('active');
  } else {
    $('.oldActive').next().addClass('active');
  }
  $('.oldActive').removeClass('oldActive');
  $('.sp').fadeOut();
  $('.active').fadeIn();
});
$('#button-previous').click(function() {
  $('.active').removeClass('active').addClass('oldActive');
  if ($('.oldActive').is(':first-child')) {
    $('.sp').last().addClass('active');
  } else {
    $('.oldActive').prev().addClass('active');
  }
  $('.oldActive').removeClass('oldActive');
  $('.sp').fadeOut();
  $('.active').fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">
  <div id="slider-wrapper">
    <div id="slider">
      <div class="backgoundImage">
        <ul id="images"></ul>
      </div>
    </div>
  </div>
</div>
<div id="container">

  <hr>
  <div id="nav" align="center">
    <div id="button-previous">
      <input id="prev_btn" type="button" name="prev_btn" value="Previous">
    </div>
    <div id="button-next">
      <input id="next_btn" type="button" name="next_btn" value="Next">
    </div>
  </div>

在这种情况下，我想问问我如何添加带有div的{{1}}标签，并且其中是class=sp标签。

Answer 1

问题在这里：

for (; i < backgroundImage.length; i++) {

    var img = new Image();
    img.url = backgroundImage[i];
    img.style.width = '160px';
    img.style.height = '120px';

    // //document.getElementById('images').appendChild(img);
    document.write("<div class=sp><img src='" + backgroundImage[i] + "' width='160' height='120'/></div>");
  }

首先：在您的for循环中，我建议在for循环内初始化我（但是可选的）：

for (var i =0; i < backgroundImage.length; i++) {

第二： document.write（...）;

write（）方法将替换文档的全部内容。此外，它位于for循环中，然后，您将用每次迭代替换整个文档。您应该使用另一种方法： appendChild（）。 appendChild不会覆盖您的文档，它只会在另一个文档中添加一个元素。

尝试使用appendChild，如果还有其他问题，请更新问题或发表评论。

Answer 2

使用image.src代替image.url并在div中添加图片，首先创建div，设置所需的属性，然后在div中添加图片

var div = document.createElement('div');
div.setAttribute('class', 'sp');

var img = new Image();
img.src = backgroundImage[i]; // img.url = backgroundImage[i];
img.style.width = '160px';
img.style.height = '120px';

div.appendChild(img); // Append Image in Div

之后使用

document.getElementById('images').appendChild(div);

或者那样使用

$('#images').append('<div class="sp"><img src="' + backgroundImage[i] + '" width="160px" height="120px" /></div>');

单击按钮时将显示脚本代码

2 个答案: