我有一个网站,左边有一个导航栏,上面显示的是小图片。每次点击它们,就像右边的那个一样。
我真的不知道如何调用它,但我想要一个javascript,它扫描我的电脑上的文件夹中的jpg并将它们放入htmlínto导航div。
如果有人能帮助我,我会非常感激。
度过美好的一天!
我的HTML:
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scan.js" rel="javascript" type="text/javascript"> </script>
<script src="script.js" lang="javascript" type="text/javascript"> </script>
<title> Galerie </title>
</head>
<body>
<div id="caption"> <h1> Bildergalerie </h1> </div>
<div id="main">
<div id="navigation"> <!-- Navigationsleiste -->
<img src="simson-kr51.jpg" alt="simson-kr51.jpg" title="simson-kr51.jpg" onclick="bildAnzeigen('simson-kr51.jpg');" />
<br />
<img src="simson-s51.jpg" alt="simson-s51.jpg" title="simson-s51.jpg" onclick="bildAnzeigen('simson-s51.jpg');" />
<br />
<img src="simson-s50.jpg" alt="simson-s50.jpg" title="simson-s50.jpg" onclick="bildAnzeigen('simson-s50.jpg');" />
<br />
<img src="simson-s53.jpg" alt="simson-s53.jpg" title="simson-s53.jpg" onclick="bildAnzeigen('simson-s53.jpg');" />
<br />
<img src="simson-sr1.jpg" alt="simson-sr1.jpg" title="simson-sr1.jpg" onclick="bildAnzeigen('simson-sr1.jpg');" />
<br />
<img src="simson-sr2.jpg" alt="simson-sr2.jpg" title="simson-sr2.jpg" onclick="bildAnzeigen('simson-sr2.jpg');" />
<br />
<img src="simson-duo.jpg" alt="simson-duo.jpg" title="simson-duo.jpg" onclick="bildAnzeigen('simson-duo.jpg');" />
<br />
<img src="simson-albatros.jpg" alt="simson-albatros.jpg" title="simson-albatros.jpg" onclick="bildAnzeigen('simson-albatros.jpg');" />
<br />
<img src="simson-sr50.jpg" alt="simson-sr50.jpg" title="simson-sr50.jpg" onclick="bildAnzeigen('simson-sr50.jpg');" />
<br />
</div>
<div id="ansicht"> <!-- Großansicht -->
<img id="grossesBild" src="simson-kr51.jpg" alt="simson-kr51.jpg" title="simson-kr51.jpg" />
</div>
</div>
</body>
获取更大图片的脚本:
function bildAnzeigen(imgName) {
var Bild = document.getElementById('grossesBild');
Bild.src = imgName;
Bild.alt = imgName;
Bild.title = imgName;
}