Question

我需要做到这一点，以便大图像成为（1,2,3）之后的图像。但是，我需要3成为1，如果添加第4个图像，代码仍然可以工作。我还需要这样做，以便在文档打开时，第一张图像显示得很大，缩略图显得比另外两张更暗。

这是我现在的代码

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>problème 1 </title>
</head>
<body>
<div id="thumbs">
    <img src="thumbs/img1.jpg" id="img1" width="150" height="102">

    <img src="thumbs/img2.jpg" id="img2" width="150" height="108">

    <img src="thumbs/img3.jpg" id="img3" width="150" height="100">
</div>
<div>
    <img id="displayLarge" width="1200" height="800">

</div>
<script>
    "use strict"
    var thumbs_ref = document.getElementById("thumbs");
    var imgs = thumbs_ref.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++){
        imgs[i].onmouseover = augmenteOpacite;
        imgs[i].onmouseout = diminueOpacite;
        imgs[i].onclick = showLarge;
        imgs[i].style.opacity = 0.6;
    }

    function diminueOpacite(e){
        var evt = e || window.event;
        var cible = evt.target || evt.srcElement;
        cible.style.opacity = 0.6;
    }

    function augmenteOpacite(e){
        var evt = e || window.event;
        var cible = evt.target || evt.srcElement;
        cible.style.opacity = 1;
    }
    function showLarge(e){
        var evt = e || window.event;
        var cible = evt.target || evt.srcElement;
        console.log(cible.src);
        var filePath = cible.src;
        var lastSep = filePath.lastIndexOf("/");
        if (lastSep == -1) {
            lastSep = filePath.lastIndexOf("\\"); // windows
        }
        if (lastSep != -1){
            var fichierNom = filePath.substr(lastSep+1);
        }
        else {
            fichierNom = cible.str ; // pas de dossier à enlever
        }
        document.getElementById("displayLarge").src = "large/"+fichierNom;
    }

    function reverse(s) { // pour inverser une chaîne de caractères
        var o = '';
        for (var i = s.length - 1; i >= 0; i--)
            o += s[i];
        return o;
    }
    
</script>
</body>

</html>

＆＃13;

大图像onclick成为另一个图像？

0 个答案: