Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre régulier
    Homme Profil pro
    developpeur web
    Inscrit en
    octobre 2014
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Bénin

    Informations professionnelles :
    Activité : developpeur web
    Secteur : Services à domicile

    Informations forums :
    Inscription : octobre 2014
    Messages : 55
    Points : 79
    Points
    79

    Par défaut Simple slide avec Javascript

    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>
    L'ordinateur ne fait pas ce qu'on veut qu'il fasse mais il fait ce qu'on lui demande de faire .

  2. #2
    Membre régulier
    Homme Profil pro
    developpeur web
    Inscrit en
    octobre 2014
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Bénin

    Informations professionnelles :
    Activité : developpeur web
    Secteur : Services à domicile

    Informations forums :
    Inscription : octobre 2014
    Messages : 55
    Points : 79
    Points
    79

    Par défaut la plus simple de faire un slide avec Javascript

    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
    L'ordinateur ne fait pas ce qu'on veut qu'il fasse mais il fait ce qu'on lui demande de faire .

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comment faire un simple slide avec Javascript
    Par jusileytrois dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 31/07/2015, 15h25
  2. Toogle avec slide en javascript
    Par arcanum dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/03/2008, 09h49
  3. Defilement de la fenetre avec JavaScript
    Par black is beautiful dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/09/2004, 11h21
  4. Lien ASP avec javascript
    Par RATIER dans le forum ASP
    Réponses: 3
    Dernier message: 15/07/2004, 09h54
  5. Réponses: 4
    Dernier message: 27/04/2004, 15h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo