在div背景图像中播放html幻灯片_Html_Slideshow

在div背景图像中播放html幻灯片

html

在div背景图像中播放html幻灯片,html,slideshow,Html,Slideshow,大家好。我是新手，这是我在这个论坛上的第一个问题。我会尽我所能维护这个社区和论坛的尊严我刚刚开始学习使用html、css和java脚本进行web开发。我试着用“div”和backgroup图片制作一个幻灯片。经过许多努力，它成功了，但并不顺利图像不是逐个连续显示，而是随机跳过。幻灯片的速度不均匀，几秒钟后，速度非常快我在代码中使用了“setInterval”  <!DOCTYPE html> <html> <

大家好。我是新手，这是我在这个论坛上的第一个问题。我会尽我所能维护这个社区和论坛的尊严

我刚刚开始学习使用html、css和java脚本进行web开发。我试着用“div”和backgroup图片制作一个幻灯片。经过许多努力，它成功了，但并不顺利

图像不是逐个连续显示，而是随机跳过。幻灯片的速度不均匀，几秒钟后，速度非常快

我在代码中使用了“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>


12)  {
imageNo=1；
}
如果（图像编号<10）{
ImageSource=filepath+“0”+imageNo+扩展名；
}否则{
ImageSource=文件路径+图像编号+扩展名
}
head4.innerHTML=imageNo+'/12'
document.getElementById（'divBox'）.style.backgroundImage=ImageSource；
imageNo++//递增1步
设置超时（显示图像，5000）；
}//显示图像
-->

您描述的问题有两个原因

首先，您调用了三次

showImages（）

，它们都同时运行，导致超时重叠，图像跳出顺序

您应该删除此函数调用

这个也

setTimeout（showImages，5000）
然后使用setInterval
，而不是setTimeout
，区别在于间隔会在每个给定的时间持续运行，而不是像超时那样只运行一次
这里更改showImages（）至var slidesInteval=setInterval（显示图像，5000）
这样，您的函数将仅每5秒运行一次，您需要将间隔存储在变量中，以防以后需要清除它
你可以在这里查全小提琴。我对图像使用了lorem picsum，因此不要复制图像URL，因为有两件事导致了您所描述的问题
首先，您调用了三次showImages（）
，它们都同时运行，导致超时重叠，图像跳出顺序
您应该删除此函数调用

这个也setTimeout（showImages，5000）
然后使用setInterval
，而不是setTimeout
，区别在于间隔会在每个给定的时间持续运行，而不是像超时那样只运行一次
这里更改showImages（）至var slidesInteval=setInterval（显示图像，5000）
这样，您的函数将仅每5秒运行一次，您需要将间隔存储在变量中，以防以后需要清除它
你可以在这里查全小提琴。我使用lorem picsum制作图像，所以不要复制图像URL
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'

var slidesInteval = setInterval(showImages,5000);