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

Posted

技术标签:

【中文标题】单击按钮时将显示脚本代码【英文标题】:Script code will display when click button 【发布时间】:2018-12-07 08:00:18 【问题描述】:

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

问题:每次我点击上一个按钮时,它都会显示我的 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>

在这种情况下,我想问我如何添加带有class=spdiv 标记,其中的img 标记。

【问题讨论】:

在编写代码时考虑使用合理的缩进 - 这将使调试和识别块更容易。 为什么使用 document.write 以及单击后退按钮时看到的 javascript 代码 【参考方案1】:

使用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] + '"   /></div>');

【讨论】:

done .. 我想问一下如何添加带有 class=sp 的 div 标签,里面是 img 标签。 已更新,请查看 如果我的回答对你有用,请接受我的回答,谢谢【参考方案2】:

问题出在这里:

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,如果您有更多问题,请更新您的问题或发表评论。

【讨论】:

如果我只添加document.getElementById('images').appendChild(img); 它只会添加img 标签如何添加div 标签?与类 sp?每张图片

以上是关于单击按钮时将显示脚本代码的主要内容,如果未能解决你的问题,请参考以下文章

c#如何单击按钮显示另一个窗体?

单击html中的按钮时如何将视频播放为弹出窗口

使用 jquery 在单击时将 html 输入框添加到 div

在按钮单击时执行 python 脚本

更改单击脚本上的文本

Unity C# - 单击按钮将游戏对象传递给另一个 C# 脚本 [关闭]