使用JavaScript的带可变图像的引导旋转木马

所以我一直在做一个引导旋转木马，点击上面的一个缩略图就可以改变它的图像。我想用这个作为一个互动的方式来显示一些与缩略图相同主题的更多图片。 我使用此网站上的模板作为旋转木马的起点：

其中一个带有的缩略图用于更改旋转木马：

<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; }

HTML：
CSS:
旋转木马
透视图：1200像素；
背景：白色；
垫面：10%；
字号：0；
边缘底部：3rem；
溢出：隐藏；
}
图#微调器{
变换样式：保留-3d；
高度：400px；
变换原点：50%50%-500px；
过渡：1s；
} 
图#微调器img{
宽度：100%；最大宽度：400px；
位置：绝对位置；左侧：30%；
变换原点：50%50%-500px；
外形：1px实心透明；
}
图#微调器img:n个子（1）{变换：旋转（0度）；
}
图#微调器img:n子（2）{变换：旋转（-45度）；}
图#微调器img:n子（3）{变换：旋转（-90度）；}
图#微调器img:n子（4）{变换：旋转（-135度）；}
图#微调器img:n子（5）{变换：旋转（-180度）；}
图#微调器img:n子（6）{变换：旋转（-225deg）；}
图#微调器img:n子（7）{变换：旋转（-270度）；}
图#微调器img:n子（8）{变换：旋转（-315deg）；}
div#carousel~span{
颜色：黑色；
利润率：5%；
显示：内联块；
文字装饰：无；
字号：2rem；
过渡：0.6s颜色；
位置：相对位置；
边缘顶部：-6rem；
边框底部：无；
行高度：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>

函数ChangeSrc（）{
var Src=document.getElementById（“输入”）.value；
var-img1；
var-img2；
var-img3；
var-img4；
var-img5；
var-img6；
var-img7；
var-img8；
开关（Src）
{
“自动”案例：{
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”；
打破
}
“等”一案：{
等
}
案例“Sneew”：{
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”；
打破
}
}
}
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；
}

我真的不知道如何解决这些问题，因为我对JS知之甚少，所以如果有任何帮助，我将不胜感激！ 提前谢谢