Question

所以我一直在研究一个自举轮播，通过单击上面的缩略图之一可以更改图像。我想用它作为一种交互方式来显示与缩略图相同主题的更多图片。我使用此网站上的模板作为轮播的起点： Carousel Template

其中一张缩略图＆lt; a href＆gt;更改轮播：

<div class="col-lg-3 hidden-md hidden-sm hidden-xs" style="padding-top:10px;padding-bottom:10px;">
    <div class="hovereffect">
        <img class="img-responsive" src="img/bestemmingen/fotos_sneeuw/Sneeuw.jpg" alt="">
        <div class="overlay">
            <h2>Sneeuw</h2>
            <a href="#" class="fill-div" onclick="ChangeSrc()" id="Input" value="sneeuw"></a>-->
        </div>
    </div>
</div>

轮播的工作代码为静态代码：

HTML:
<div id="carousel">
    <figure id="spinner">
        <img id="img1" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen.jpg" alt>
        <img id="img2" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen2.jpg" alt>
        <img id="img3" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen4.jpg" alt>
        <img id="img4" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen5.jpg" alt>
        <img id="img5" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen7.jpg" alt>
        <img id="img6" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen8.jpg" alt>
        <img id="img7" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen9.jpg" alt>
        <img id="img8" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen10.jpg" alt>
    </figure>
</div>
<span style="float:left" class="ss-icon" onclick="galleryspin('-')">&lt;</span>
<span style="float:right" class="ss-icon" onclick="galleryspin('')">&gt;</span>

CSS:
div#carousel { 
    perspective: 1200px; 
    background: white; 
    padding-top: 10%; 
    font-size:0; 
    margin-bottom: 3rem; 
    overflow: hidden; 
}
figure#spinner { 
    transform-style: preserve-3d; 
    height: 400px; 
    transform-origin: 50% 50% -500px; 
    transition: 1s; 
} 
figure#spinner img { 
    width: 100%; max-width: 400px; 
    position: absolute; left: 30%;
    transform-origin: 50% 50% -500px;
    outline:1px solid transparent; 
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span { 
    color: black; 
    margin: 5%; 
    display: inline-block; 
    text-decoration: none; 
    font-size: 2rem; 
    transition: 0.6s color; 
    position: relative; 
    margin-top: -6rem; 
    border-bottom: none; 
    line-height: 0; }
div#carousel ~ span:hover { color: darkslategray; cursor: pointer; }

我在想Jscript让它变得互动。我尝试使用这段代码，但我知道我最后在document.getElementByIds上做错了，因为我没有对var Src做任何事情：

<script>
    function ChangeSrc() {
        var Src = document.getElementById("Input").value;
        var img1;
        var img2;
        var img3;
        var img4;
        var img5;
        var img6;
        var img7;
        var img8;
        switch (Src)
            {
                case 'auto':{
                    img1 = "/img/bestemmingen/fotos_auto/Auto2.jpg";
                    img2 = "/img/bestemmingen/fotos_auto/Auto3.jpg";
                    img3 = "/img/bestemmingen/fotos_auto/Auto4.jpg";
                    img4 = "/img/bestemmingen/fotos_auto/Auto5.jpg";
                    img5 = "/img/bestemmingen/fotos_auto/Auto6.jpg";
                    img6 = "/img/bestemmingen/fotos_auto/Auto7.jpg";
                    img7 = "/img/bestemmingen/fotos_auto/Auto8.jpg";
                    img8 = "/img/bestemmingen/fotos_auto/Auto9.jpg";
                    break;
                }
                case 'etc':{
                    etc
                }
                case 'sneeuw':{
                    img1 = "/img/bestemmingen/fotos_sneeuw/Sneeuw2.jpg";
                    img2 = "/img/bestemmingen/fotos_sneeuw/Sneeuw3.jpg";
                    img3 = "/img/bestemmingen/fotos_sneeuw/Sneeuw4.jpg";
                    img4 = "/img/bestemmingen/fotos_sneeuw/Sneeuw5.jpg";
                    img5 = "/img/bestemmingen/fotos_sneeuw/Sneeuw6.jpg";
                    img6 = "/img/bestemmingen/fotos_sneeuw/Sneeuw7.jpg";
                    img7 = "/img/bestemmingen/fotos_sneeuw/Sneeuw8.jpg";
                    img8 = "/img/bestemmingen/fotos_sneeuw/Sneeuw9.jpg";
                    break;
                }
            }
        }
        document.getElementById("img1").src = img1;
        document.getElementById("img2").src = img2;
        document.getElementById("img3").src = img3;
        document.getElementById("img4").src = img4;
        document.getElementById("img5").src = img5;
        document.getElementById("img6").src = img6;
        document.getElementById("img7").src = img7;
        document.getElementById("img8").src = img8;
    }
</script>

我真的不知道如何绑定松散的末端，因为我不太了解JS，所以任何帮助都将不胜感激！提前谢谢。

使用JavaScript的可变图像的Bootstrap轮播

0 个答案: