Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/git/20.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
我的JavaScript滑块在开始时工作正常,然后就损坏了_Javascript - Fatal编程技术网

我的JavaScript滑块在开始时工作正常,然后就损坏了

我的JavaScript滑块在开始时工作正常,然后就损坏了,javascript,Javascript,我的JavaScript滑块在开始时工作正常,但过了一段时间后就会损坏,有时需要一分钟,有时需要五分钟 事实上我不知道这是冲突还是什么,你们能帮帮我吗 您可以在这里查看:查看代码时,您似乎还没有太多的web开发技能。这很好,因此我将通过每一步改进您的网页,因为我希望您也成为一个伟大的开发人员 首先,让我们从CSS开始。不必为每一侧设置填充,也可以在所有一侧设置填充,而无需四行。只需使用padding:0在这种情况下就足够了。对于边距,当您希望左侧和右侧为自动,顶部和底部为0px时,您可以在一个属

我的JavaScript滑块在开始时工作正常,但过了一段时间后就会损坏,有时需要一分钟,有时需要五分钟

事实上我不知道这是冲突还是什么,你们能帮帮我吗


您可以在这里查看:

查看代码时,您似乎还没有太多的web开发技能。这很好,因此我将通过每一步改进您的网页,因为我希望您也成为一个伟大的开发人员


首先,让我们从CSS开始。不必为每一侧设置填充,也可以在所有一侧设置填充,而无需四行。只需使用
padding:0在这种情况下就足够了。对于边距,当您希望左侧和右侧为自动,顶部和底部为0px时,您可以在一个属性中“链接”它们:
margin:top right bottom left,就像一个时钟。更短的是
边距:左上下和右下,在您的情况下是
边距:0自动控制台显示“Uncaught SyntaxError:意外令牌hey MarijnS95 thx”作为答案,你能给我一个如何在脚本中使用数组的示例吗?嗨,我想给你一个示例,但我的电池没电了。我会在几分钟内写一封。如果您将所有代码放在JSFIDLE中进行更好的编辑,这将非常有帮助(因为适当的问题“应该”包括代码,而不是说在控制台中的这个链接上找到代码)。@samehsayed我想说的是,如果您觉得我的答案有帮助,您应该接受它,所以其他用户可以很容易地识别出这个答案是否有用。
border: solid;
border-width: thick;
border-color: #E6E6E6;
.sliderPicture {
    opacity:0; /*We want all images to be transparent, as we override this value when we want to display the picture*/
    position:absolute; /*this puts all the pictures in the same place behind eachother, so that we do not need to display:none; and display:block; them*/
    transition:2s opacity; /*this means, every time the opacity of the element changes, do not directly set it to that opacity but fade to it in 2 seconds*/
}
.showPicture{
    opacity:1;
}
var images = document.getElementsByClassName('sliderPicture'); //this contains an array of all the images.
var imageTime = 3000; //the time in ms for when the pictures should change
var i = 0; //the picture we are at
setInterval(function(){
    if(images[i].classList.contains('showPicture')) images[i].classList.remove('showPicture'); //if the element contains the class showPicture, remove it. (we first check for it to not generate errors when removing something that might not be there (it should, but never create any room for errors))
    i++; //increment the image where we are at
        if(i >= images.length) i=0; //if we are at the end of our array. Picture 2 of the array is the last picture, so, as we increment it above, our i value should be 3 then. The length of our array is also 3, so when i=length of the array we set it back to 0 to display the image
    images[i].classList.add('showPicture'); //here we add the class so the element gets opacity 1
}, imageTime);