Javascript 投递箱galery 2_Javascript_Html_Css

Javascript 投递箱galery 2

javascript html css

Javascript 投递箱galery 2,javascript,html,css,Javascript,Html,Css,所以我的问题是，我怎样才能制作一个“虚拟”的图片库这就是代码，为什么它不起作用。。我是javascript新手，所以我想这就是我遇到问题的原因，但我希望我也能完成我大学的这项任务……：） Main.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Kezdőoldal</title> <l

所以我的问题是，我怎样才能制作一个“虚拟”的图片库

这就是代码，为什么它不起作用。。我是javascript新手，所以我想这就是我遇到问题的原因，但我希望我也能完成我大学的这项任务……：）

Main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kezdőoldal</title>
    <link rel="stylesheet" href="styles/css.css" />
</head>
<body>
    <center>
        <h1>Fényképgaléria</h1>
        <a href="index.html" class="active">Kezdőoldal</a>
        <a href="szerzorol.html">A szerzőről</a>
        <a href="hasznalati.html">Használati utasítás</a>
        <br />
        <br />
        <br />
        <h3 id="cim">kép 1 címe</h3>
        <div id="main">
            <img src="images/kep1.jpg" id="fo_kep" width="320" height="200" />
        </div>
        <br />
        <div id="container">
            <img src="images/kep1.jpg" alt="kép 1 címe" />
            <img src="images/kep2.jpg" alt="kép 2 címe" />
            <img src="images/kep3.jpg" alt="kép 3 címe" />
            <img src="images/kep4.jpg" alt="kép 4 címe" />
            <img src="images/kep5.jpg" alt="kép 5 címe" />
            <img src="images/kep6.jpg" alt="kép 6 címe" />
            <img src="images/kep7.jpg" alt="kép 7 címe" />
            <img src="images/kep8.jpg" alt="kép 8 címe" />
            <img src="images/kep9.jpg" alt="kép 9 címe" />
            <img src="images/kep10.jpg" alt="kép 10 címe" />
        </div>
        <br /><br /><br />
    </center>
    <script type="text/javascript" src="scripts/js.js"></script>
</body>
</html>

你说的“虚拟图片画廊”是什么意思？什么东西不适用于给定的代码？你试图解决什么问题？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>A szerzőről</title>
    <link rel="stylesheet" href="styles/css.css" />
</head>
<body>
    <center>
        <h1>A szerzőről</h1>
        <a href="index.html">Kezdőoldal</a>
        <a href="szerzorol.html" class="active">A szerzőről</a>
        <a href="hasznalati.html">Használati utasítás</a>
        <br />
        <br />
        <br />
        Apró Dániel<br /><br />
        4ITM<br /><br />
        MESC<br /><br />
    </center>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Használati utasítás</title>
    <link rel="stylesheet" href="styles/css.css" />
</head>
<body>
    <center>
        <h1>Használati utasítás</h1>
        <a href="index.html">Kezdőoldal</a>
        <a href="szerzorol.html">A szerzőről</a>
        <a href="hasznalati.html" class="active">Használati utasítás</a>
        <br />
        <br />
        <br />
        A Főoldalon a kicsi képekre kattintva megtekinthetjük a képeket nagyobban.
    </center>
</body>
</html>

var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', function() {
        changeTo(this);
    });
}
function changeTo(kep) {
    document.getElementById('cim').innerHTML = kep.alt;
    document.getElementById('fo_kep').src = kep.src;
}

#container img {
    width: 64px;
    height: 40px;
    margin: 5px;
    cursor: pointer;
}
a {
    text-decoration: none;
    outline: 1px solid gray;
    padding: 5px;
    display: inline-block;
    color: black;
}
#main {
    width: 640px;
    height: 480px;
    background: rgba(100,100,100,0.5);
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.active {
    text-decoration: underline;
}