Simple slide avec Javascript

**paoli121** · 30/07/2016, 19h29

Réaliser votre page web avec slider en suivant les étapes suivantes :
-D'abord Télécharger la librairie de Jquery sur ce site : https://jquery.com/download/ c'est gratuit le telechargement
-En suite créer trois fichiers slider.js, slider.css et index.html
Dans le fichier index.html vous mettez :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE HTML>
<html>
    <head>
		<title>Slider page</title>
              <!--  vous insérez la librairie Jquery --> 
		<script type="text/javascript" src="jquery.min.js"></script>
              <!--  vous insérez la page css du slider --> 
           <link rel="stylesheet" type="text/css" href="slider.css">
    <body>
           <div id="slider_conteneur">
			<ul id="slider">
				<li><img src="image1.png"></li>
				<li><img src="image2.png"></li>
				<li><img src="image3.png"></li>
			</ul>
          </div>
           <script type="text/javascript"> 
                var slider = $("#slider"); var li = $("#slider li"); var next = $("#bouton_next_picture_slider"); var previous =                $("#bouton_previous_picture_slider"); 
                slider_function(li,next,previous, slider);
                 function slider_cercle(li,next,previous, gd,cercle){
        var now_slider = 0;
        var slide_time = 1000;
        var delay_recall = 5;
        var c = false;
        
        li.hide();
        li.eq(now_slider).show();       
        var loop = setInterval(function(){slider(1,c)}, delay_recall * 1000);
        
        next.on('click', function() {
        slider(1);
    });
 
    previous.on('click',        function() {
       slider(-1) 
    });
        function animateOpacityIn(btn_enter){
         btn_enter.animate({ opacity: 1 });
    }
    function animateOpacityOut(btn_leave){
       btn_leave.animate({ opacity: '0.6' });
    }
        gd.on('mouseenter', function() {
        clearInterval(loop);
                $(this).css({
                        cursor : "pointer",
                })
                next.fadeIn().on('mouseenter', function(){
             animateOpacityIn(next) 
             }).on('mouseleave', function(){ 
            animateOpacityOut(next) 
        });
        previous.fadeIn().on('mouseenter', function(){ 
            animateOpacityIn(previous) 
             }).on('mouseleave', function(){
             animateOpacityOut(previous) 
        });
    }).on('mouseleave', function() {
        loop = setInterval(function(){slider(1,c)}, delay_recall * 1000);
                next.fadeOut();
        previous.fadeOut();
    });
        
        function slider(direction,cer_act){
                var left;
            var current = now_slider;
                        if(direction !=2 ){
                                if(direction > 0){
                                        now_slider++
                                        left = 100;
                                 }
                                 else{ 
                                 now_slider--
                                        left = -100;
                                 }
                        }
                        else{
                                left = -100;
                                if(now_slider > cer_act){
                                        left = 100;
                                }
                                now_slider = cer_act;
                        }
                        if(now_slider >  li.length - 1){
                                now_slider = 0;
                        }
                        else if(now_slider < 0){
                                now_slider = li.length - 1;
                        }
                        
            li.eq(current).css({
                left:'0px',
            }).animate({
                left: -left + '%',
            }, slide_time, function() {
                $(this).fadeOut(3000);
            });
            li.eq(now_slider).css({
                left: left + '%',
                                opacity : 0 , 
            }).animate({
                left: '0px',
                                opacity : '1',
            }, slide_time).show();
                        
        }
}
 
         </script>
    </body>
</html>

**paoli121** · 30/07/2016, 23h05

si vous vouliez réaliser un slider construit a base de jquery une librairie de javascript, suivez alors les étapes suivantes ( Mais ici c'est sans bouton next et previous; ni d'arrêt d'animation lors du survol du curseur dans la zone du slider) :
- Ayez une base en HMTL, CSS et Javascript (ou Jquery).
-D'abord Télécharger la librairie Jquery sur ce site : https://jquery.com/download/ c'est gratuit le telechargement
-En suite créer trois fichiers slider.js, slider.css et index.html
- Créez un dossier slider et mettez les trois fichiers dedans en plus de ça ajoutez aussi les images (image1, image2, image3,....)
Dans le fichier index.html vous mettez:

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
<!DOCTYPE HTML>
 <html>
	<head>
		<title></title>
                 <!-- On associe notre fichier slider.css a notre page index.html -->
		<link rel="stylesheet" type="text/css" href="css/slider.css"/>
                 <!-- On associe notre fichier jQuery a notre page index.html (après telechargement) -->
		<script src="jquery.min.js"></script>
                 <!-- On associe notre fichier slider.js a notre page index.html -->
		<script src="slider.js"></script>
	</head>
	<body>
		<!---- code Html de notre slider  
			on crée un grand conteneur pour notre slider avec id="displayer_slider_block"
		-->
		<div id="displayer_slider_block">
			<!--- On crée a la suite une liste pour nos images-->
			<ul id="slider_conteneur">
				<li class="slider_image">
					<!--Image 1--><img src="2.png"/>
				</li>
				<li class="slider_image">
					<!--Image 2--><img src="3.jpg"/>
				</li class="slider_image">
				<li>
					<!--Image 3--><img src="4.jpg"/>
				</li>
			</ul>	
		</div>
	</body>
 </html>
 <!--Fin code html-->
 <!-- On va dans notre fichier stylesheet slider.css -->

Une fois le fichier index établie on va dans slider.css pour la mise en forme. Dans slider.css vous mettez:

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 /*************************************************
 *      ici on va positionner les elements.		  *
 *************************************************/
 /*  *	On commence par l'id displayer_slider_block   */
	#displayer_slider_block{
		width : 500px;
		height : 400px;
		top : 50px;
	}
/* positionner notre conteneur de la liste par rapport a notre displayer_slider_block  */
	#slider_conteneur{
		position : relative;
		width : 100%;
		height : 100%;
		background : #000000;
	}
/* positionner chaque line ou <li>  par rapport a l'id slider_conteneur*/
	#slider_conteneur li{
		position : absolute;
		top : 0px;
		left : 0px;
		width : 100%;
		height: 100%;
		list-style : none;
	}
/* adapter les images a la forme des <li> */
	#slider_conteneur li img{
		width : 100%;
		height : 100%;
	}
/*************************************************************************************************************************|
	vous vous arrêtez a ce niveau et vous lancez votre page index.html dans un navigateur, ça va vous affichez la dernière image dont les autres seront derrières elle.
	parce que dans le style des li on a -> position : absolute;
*************************************************************************************************************************/	
/*************************************************************************************************************************|
	fin de notre fichier slider.css. On va dans notre fichier slider.js (le moteur de notre slider)														
*************************************************************************************************************************/

On vient de finir avec le fichier slider.css, vous pouvez lancer dans un navigateur le fichier index pour voir ce que ça donne. Mais a ce niveau il n'y a pas d'animation. Pour l'animation allons y dans notre fichier slider.js et suivez le code ci-dessous:

Code JavaScript :

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
  $(function(){
	 // commençons par créer des variables pour les attributes html a manipuler en javascript pour ce fait on aura :
	var slider_conteneur = $("#slider_conteneur"); var li = $("li"); var actuelle_image = 0;
	// Vous devez constater qu'on n'a pas utiliser l'id displayer_slider_block et c'est parce que on n'en pas bésoin. alors concentrons nous sur ces deux variables	
 
	// on compte le nom de <li> avec (length) et on stocke le nombre dans une varible total_li
	var total_li = li.length;
	// Cachons toute les <li> contenants les images avec la hide();
	li.hide();
	// on affiche unique le premier <li> avec show() ou fadeIn(). Pour indiquer a javascript le premier <li> à afficher lors du chargement on utilise eq(la position ici) alors on aura :
	li.eq(actuelle_image).show(); // => ou li.eq(actuelle_image).fadeIn(); avec actuelle_image = 0 (voir en haut du code);
	/*****************************************************************************************
		le zéro (actuelle_image) signifie la position du premier du <li>
		on crée une fonction qui sera nommer display_next_li();
	$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
	function display_next_li(){
		/********Debut function *******/
		// stockons le numero de la position de l'accienne image se trouvant dans la variable 'actuelle_image'  dans une nouvelle viariable 'ancienne_image' qui sera une variable spéciale a notre fonction on aura alors :
		var acienne_image = actuelle_image;
		// ensuite ajoutons 1 a la valeur de la varible 'actuelle_image' pour avoir le numero de la position de la nouvelle image qui va suivre l'ancienne.
		actuelle_image++;
		/********************************************************************************************************
		on verifie si la valeur de la variable actuelle_image (après ajout de 1 a l'ancienne valeur) est superieur au nombre total des images. 
			si c'est le cas l'image qui va suivre predra le numero zéro 0. 
			ce qui nous permet d'aller sur la première image.
		*********************************************************************************************************/
		if(actuelle_image > total_li-1){
			actuelle_image = 0;
		}
		// On cache l'acienne image avec fadeOut(vitesse)
		li.eq(acienne_image).fadeOut(1500);
		// On affiche l'image suivante avec fadeIn(vitesse)
		li.eq(actuelle_image).fadeIn(1000);
		/******** Fin function *******/
	}
	// on appelle notre fonction display_next_li() dans une intervalle de 2 secondes.
	setInterval(function(){display_next_li()},2000);
	/******************** fin ! lancez à présent votre page index.html dans un navigateur | Mais assurez vous que votre fichier slider.css est au point ainsi que votre fichier index.html **********************************/
 });

Et voilà note slider sans bouton suivant et précédent, sans arrêt d'animation au survol du curseur dans la zone du slider. vous voulez avoir celui avec ces éléments???

BEY

Simple slide avec Javascript

Contribuez

Vue hybride

Discussions similaires

Partager

Partager