Question

我刚刚完成了基于制作图像滑块的练习。

我已经按照Youtube教程一步一步地完成了它。

我的图片已作为放置在同一文件夹中的文件放在我的代码中。现在我想改变它，所以我的图像将作为链接放在我的代码中。我的意思是让它在没有图像文件的情况下直接在我的电脑上工作，但是从前面拿它。谷歌图片。

到目前为止，这是我的代码：

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
			body
			{
				background-color: #222222;
				font-size: 24px;
				color: white;
			}
		</style>
		
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		
		<script type="text/javascript">
		
			var number = Math.floor(Math.random()*5)+1;
			
			var timer1 = 0;
			var timer2 = 0;
			
			function setSlide(slideNumber)
			{
				clearTimeout(timer1);
				clearTimeout(timer2);
				number = slideNumber - 1;
				
				hide();
				setTimeout("changeSlide()", 500);
				
			}
			
			function hide()
			{
				$("#slider").fadeOut(500);
			}
		
			function changeSlide()
			{
				number++; if (number>5) number=1;
				
				var file = "<img src=\"slajdy/slajd" + number + ".png\" />";
				
				document.getElementById("slider").innerHTML = file;
				$("#slider").fadeIn(500);
				
				timer1 = setTimeout("changeSlide()", 5000);
				timer2 = setTimeout("hide()", 4500);
			
			}
			
		</script>
		
	</head>
	<body onload="changeSlide()">
	
		<span onclick="setSlide(1)" style="cursor:pointer;">[ 1 ]</span>
		<span onclick="setSlide(2)" style="cursor:pointer;">[ 2 ]</span>
		<span onclick="setSlide(3)" style="cursor:pointer;">[ 3 ]</span>
		<span onclick="setSlide(4)" style="cursor:pointer;">[ 4 ]</span>
		<span onclick="setSlide(5)" style="cursor:pointer;">[ 5 ]</span>
		
		<div id="slider"></div>
		
	</body>
</html>

如果有人帮助我，我会很高兴！

由于

Answer 1

这样做：

制作一系列您想要显示的图像链接。
遍历数组的每个元素。

请注意，您必须删除使用数字变量的部分。

JavaScript - 图像滑块 - 如何将文件源更改为链接源

1 个答案: