Dysfonctionnement de mon slideshow

Version imprimable

Bonjour à tous et à toutes

Je suis en train de faire un petit slideshow, très simple, très léger, mais si je suis là c'est qu'il y a un petit problème....

Ce petit diaporama a un défaut, lors du 1er tour, la dernière image s'intercale entre toutes les autres et quand ce 1er tour est fini, il fonctionne parfaitement.

Je vous mets les codes , pour HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="slideshow"> <div> <img src="images/textile/01.jpg" width="240"> </div> <div> <img src="images/textile/02.jpg" width="240"> </div> <div> <img src="images/textile/03.jpg"> </div> </div>
Pour le javascript
Code:

1 2 3 4 5 6 7 8 9 10 div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000);
et pour le CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 #slideshow { margin: 50px auto; position: relative; width: 313px; height: 470px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); } #slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; }
Je suppose que c'est dans le javascript que j'ai fait un erreur, mais j'avoue qu'au niveau de connaissance que j'ai je me retrouve un peu coincé....

Si vous pouviez me mettre sur la piste, ça serait sympa

Merci à vous

15/05/2018, 14h28
psychadelic

ton code est incomplet pour qu'on puisse réellement comprendre ce que tu a fait.

j’espère aussi que tu a conscience que la fonction setInterval ( et même les autres) ne s’exécutent pas forcément constamment avec les mêmes intervalles de temps, et que tu peux te retrouver avec des fonctions qui se chevauchent.

Ensuite ta façon d'utiliser la fonction setInterval impose à l’interpréteur d'en générer une nouvelle pour chaque cycle, et mis à part le fait que ce ne soit pas très propre comme écriture, cela impose aussi à l'interpréteur d'en refaire une interprétation complète à chaque fois et donc aussi d'y perdre du temps, ce qui du coup peut aussi générer des mises en attentes de la part du navigateur s'il doit effectuer d'autres taches en parallèle, ou tout simplement le laisser au système.

après relecture, ton erreur viens du fait qu'au départ tous tes div sont visibles.

donc au niveau du css :

Code:

1
2
3
4
5
6
7
8
9
10
11
    #slideshow>div {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      display: none;
    }
    #slideshow>div:first-child {
      display: block;
    }

solution complète :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="utf-8">
  <title> interval</title>>
  <style>
    #slideshow {
      margin: 50px auto;
      position: relative;
      width: 313px;
      height: 470px;
      padding: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    }
 
    #slideshow>div {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      display: none;
    }
    #slideshow>div:first-child {
      display: block;
    }
  </style>
</head>
 
<body>
 
  <div id="slideshow">
    <div>
      <img src="textile/01.jpg">
    </div>
    <div>
      <img src="textile/02.jpg">
    </div>
    <div>
      <img src="textile/03.jpg">
    </div>
    <div>
      <img src="textile/04.jpg">
    </div>
    <div>
      <img src="textile/05.jpg">
    </div>
  </div>
 
  <button id="bt_start" >start</button>
  <button id="bt_stop"  >stop</button>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
 
      ref_interval = 0;
      $('#bt_stop').prop("disabled",true);
 
      function SlidIN() {
        $('#slideshow > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slideshow');
      }
 
      $('#bt_start').on('click', function() {
 
        console.log('start');
 
        ref_interval = setInterval( SlidIN , 3000);
        $(this).prop("disabled",true);
        $('#bt_stop').prop("disabled",false);
      });
 
      $('#bt_stop').on('click', function() {
 
        console.log('stop');
 
        clearInterval(ref_interval);
 
        $(this).prop("disabled",true);
        $('#bt_start').prop("disabled",false);
      });
 
 
 
    }); /// jQuery(document).ready
  </script>
</body>
 
</html>

mais il n'empêche que mes remarques précédentes restent valables.

17/05/2018, 19h06
bernard26000

Bonjour et merci pour tes réponses psychadelic

Je reconnais que je n'avais pas approfondi la fonction setInterval....

J'apprends un peu chaque jour et grâce à toi, j'ai encore appris

Merci à toi pour tes remarques et aussi pour ta "correction"

Amicalement