单击按钮时将显示脚本代码
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=sp
的div
标记,其中的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?每张图片以上是关于单击按钮时将显示脚本代码的主要内容,如果未能解决你的问题,请参考以下文章