大家好。我是新来的新手，这是我第一次向这个论坛提问。我会尽我最大的努力来维护这个社区和论坛的尊严。
我刚刚开始学习html，css和java脚本的网页开发。我试图用 "div "和backgroup-images做一个图片幻灯片。
图片不是一个接一个地出现，而是随机跳过。幻灯片的速度并不一致，几秒钟后就会变得非常快。
我在代码中使用了 "setInterval"。
<!-- scroll.html -->
<!DOCTYPE html>
<html>
<<head>
<meta charset="UTF-8">
<meta name= "index.html" content="html self made web site ">
<meta name= "keywords" content="web design, affordable and professional">
<meta name="description" content="Affordable and smart web desing without any builders rather via self made codes">
<meta name="Author" content="Binod Binani">
<meta name="viewport" content="width=device-width,initial-scale=0">
<!--Css link -->
<!--<link rel="stylesheet" type="text/css" href="../HTML-WEB/sc-css/sc_style1.css">
<script type="text/javascript" src="../html-web/java-js/slides.js" ></script> -->
<title>#Sharp Compusoft scroll#</title>
<style>
#Myimg{
}
#divBox{
min-height: 425px;
border: 2px black solid;
float: right ;width: 48%;
background-image: url("../html-web/sharp-slides/05.bmp");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: auto;
}
#divSlides{
background-image: url("../HTML-WEB/img/it-slide01.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 425px;
border: 2px blue solid;float:
left; width: 50%;
}
</style>
</head>
<body onload="showImages()">
<section id='Middle' style="max-height: 430px;margin-top: 100px; border: 8px yellow solid; position: relative;">
<div id="divMiddle" style="min-height:425px; border: 5px red solid; margin: auto;">
<div id="divSlides" >
<!--50% left for fix image"> -->
</div>
<div id='divBox'>
<!--50% right for sliding image. Images are from 1 to 12 slides"> -->
<h4 id='head4'>1/12</h4>
</div>
</div>
</section>
<script>
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'
showImages();
function showImages(){
var ImageSource=""
if (imageNo > 12) {
imageNo=1 ;
}
if (imageNo< 10){
ImageSource= filepath +"0" +imageNo + extension ;
} else{
ImageSource= filepath +imageNo + extension
}
head4.innerHTML = imageNo+'/12'
document.getElementById('divBox').style.backgroundImage = ImageSource;
imageNo++; //increment by 1 step
setTimeout(showImages,5000);
} // showImages
</script> -->
</body>
</html>
有一对夫妇的事情导致你所描述的问题。
首先，你叫 showImages() 三次，它们都在同一时间运行，导致超时时间重叠，图像跳转失序。
你应该删除这个函数调用 <body onload="showImages()">
还有这个 setTimeout(showImages,5000);
然后使用 setInterval而不是 setTimeout不同的是，间隔时间每给定一次就会一直运行，而不是像超时一样只运行一次。
这里改变 showImages(); 到 var slidesInteval = setInterval(showImages,5000);
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'
var slidesInteval = setInterval(showImages,5000);
这样你的函数将每5秒才运行一次，你需要将间隔时间存储在一个变量中，以防你以后要清除它。
你可以在这里查看完整的fiddle https:/jsfiddle.netzgranda5gnfr7hv8 . 我在图片上使用了lorem picsum，所以不要复制图片的URLs。