html слайд-шоу в фоновом изображении div - PullRequest
Новая
       64

html слайд-шоу в фоновом изображении div

1 голос
/ 08 мая 2020

Доброго времени суток всем. Я новичок и новичок, и это мой первый вопрос на этом форуме. Я бы изо всех сил старался поддерживать достоинство этого сообщества и форума.

Я только начал изучать веб-разработку с помощью 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>

1 Ответ

0 голосов
/ 11 мая 2020

Есть несколько причин, вызывающих проблему, которую вы описываете

Во-первых, вы вызываете 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 секунд, вам нужно сохранить интервал в переменной, если вы хотите чтобы очистить его позже.

Вы можете проверить полную скрипку здесь https://jsfiddle.net/zgranda/5gnfr7hv/8/. Я использовал lorem picsum для изображений, поэтому не копируйте URL-адреса изображений

...