Javascript 更改缩略图上的滑块图像。图像更改一秒钟，然后恢复

我对编码是新手，有一个任务，我们需要在没有jquery插件的情况下编码一个滑块。目前，我的滑块可以工作，但最后一个功能，单击缩略图以更改滑块图像，效果不佳

图像将正确更改并停留一秒钟，然后恢复到第一个图像。我想防止图像恢复，但无法查明问题所在。作业前端可在此处访问：

任何建议都将不胜感激。多谢各位

Javascript：4个滑块图像中的每一个都有一个1到4的数字变量。单击滑块上的左箭头或右箭头可从变量中添加或减去1

function photo(x) {
var image = document.getElementById('image');
imageCount = imageCount + x;
    if(imageCount > 100 && imageCount <200){
imageCount = 1;
}       else if (imageCount > 200 && imageCount <300){
imageCount = 2;
}        else if (imageCount > 300 && imageCount <400){
imageCount = 3;
}        else if (imageCount > 400 && imageCount <500){
imageCount = 4;
}   else if (imageCount > 4){
imageCount = 1;
}   else if (imageCount < 1){
imageCount = 4;
}

image.src = "img/img"+ imageCount +".jpg";
}

功能照片（x）{
var image=document.getElementById（'image'）；
imageCount=imageCount+x；
如果（imageCount>100&&imageCount 200&&imageCount 300&&imageCount 400&&imageCount 4）{
imageCount=1；
}否则如果（imageCount<1）{
图像计数=4；
}
image.src=“img/img”+imageCount+”.jpg”；
}

Html：这4个图像中的每一个都是缩略图。单击时，将为变量设置一个较大的数字。根据数字，相应地设置相应的图像变量

<section class="photos">
        <ul>
            <li class="one_photo"><a href=""><img OnClick="photo(150)" src="img/1_thumb.jpg" alt="description of photo 1" /></a></li>
            <li class="one_photo"><a href=""><img OnClick="photo(250)" src="img/2_thumb.jpg" alt="description of photo 2" /></a></li>
            <li class="one_photo"><a href=""><img OnClick="photo(350)" src="img/3_thumb.jpg" alt="description of photo 3" /></a></li>
            <li class="one_photo"><a href=""><img OnClick="photo(450)" src="img/4_thumb.jpg" alt="description of photo 4" /></a></li>
        </ul>
    </section>

看来您的条件是个问题，为什么不做一个简单的switch语句呢？ 类似这样的事情可能会有所帮助：

switch(x) {    
    case 150:
       imageCount = 1;
       break;    
    case 250:
       imageCount = 2;
       break;    
    case 350:
       imageCount = 3;
       break;    
    case 450:
       imageCount = 4;
       break;    
    default:
       imageCount = 1;
       break; 
}