简单的滑块不会改变src

Question

我制作了一个非常简单的滑块，它已经工作了几个小时但是尽管我没有改变任何东西但它没有做任何事情。我找不到错误。它已经过去几个小时了，我不知道现在是错的。 演示：buhehe.de/allgemeinen/nackte-frauen/ 我有两个滑块，每个都有它的JS，我把它放在Head inline withoud外部文件中：

JS：

var imageCount = 1;
var total = 9;

function photo(x) {
    var image = document.getElementById('image');
    imageCount = imageCount + x;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "/wp-content/uploads/2018/img/"+ imageCount +".jpg";
    clearInterval(time);                                 
    time =  window.setInterval(function photoA() {       
        var image = document.getElementById('image');
        imageCount = imageCount + 1;
        if(imageCount > total){imageCount = 1;}
        if(imageCount < 1){imageCount = total;} 
        image.src = "/wp-content/uploads/2018/img/"+ imageCount +".jpg";
    },10);
}
var iCount = 1;
var totl = 8;
function phot(x) {
    var images = document.getElementById('images');
    iCount = iCount + x;
    if(iCount > totl){iCount = 1;}
    if(iCount < 1){iCount = totl;}  
    images.src = "/wp-content/uploads/2018/img/g/"+ iCount +".png";
    clearInterval(time);                                 
    time =  window.setInterval(function photoA() {       
        var images = document.getElementById('images');
        iCount = iCount + 1;
        if(iCount > totl){iCount = 1;}
        if(iCount < 1){iCount = total;} 
        images.src = "/wp-content/uploads/2018/img/g/"+ iCount +".png";
    },10);
}

的CSS：

@media only screen and (max-width: 665px) {
     #image, #images{
         width: 400px !important;
         height:300px !important;
    }
     #slider, .slddl {
         width: 400px !important;
         height:300px !important;
    }
    .left,.right {
        width:35px !important;
        height:35px !important;
    }
}
@media only screen and (max-width: 500px) {
    #image, #images{
        width: 300px !important;
        height:200px !important;
    }

    #slider, .slddl  {
        width: 300px !important;
        height:200px !important;
    }
}
.slddl {
    height: 400px !important;
    text-align: center  !important;
}
#slider {
    width: 400px;
    max-width:600px;
    height: 450px;
    margin: 5px auto;
    position:relative;
    border-radius:4px;
}
#image {
    width: 400px;
    height: 450px;
}
#images {
    width: auto !important;
    height: 400px;
    display: inline-block  !important;
}
#qttq {
    width: 100 !important;
    text-align: center !important;
}
.left {
    height:40px;
    width:40px;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    left:5px;
    opacity:1;
    transition: all .2s ease-in-out 0s;
}
.right {
    height:40px;
    width:40px;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    right:5px;
    opacity:1;
    transition: all .5s ease-in-out 0s;
}
.right:hover ,  .left:hover {
    opacity:0.8; cursor: pointer;
}