时间戳

首页 > 解决方案 > 单击按钮时将显示脚本代码

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

问题描述

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

问题：每次我单击上一个按钮时，它都会显示我的 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带有 a 的标签，其中的标签class=sp是img标签。

标签： javascriptjqueryhtml

解决方案

问题在这里：

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 循环中初始化 i （但是可选的）：

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

第二：document.write(...);

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

尝试使用 appendChild，如果您有更多问题，请更新您的问题或发表评论。

推荐阅读