Dysfonctionnement de mon slideshow

**bernard26000** · 15/05/2018, 09h56

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**psychadelic** · 15/05/2018, 14h28

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.

**psychadelic** · 15/05/2018, 20h09

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

donc au niveau du css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**bernard26000** · 17/05/2018, 19h06

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

Dysfonctionnement de mon slideshow

jQuery

Vue hybride

Discussions similaires

Partager

Partager