Scroll d'image

Version imprimable

19/10/2010, 17h46
stomerfull

Scroll d'image

Bonjour à tous,

Je voudrais faire exactement ou à peu près la même chose comme le scroll d'image sur cette site :

http://www.edgecast.com/

c'est à dire scroll automatique des images même si on ne pointe pas la souris sur la grande flèche et aussi l'image va défiler(scroller) si on pointe la souris sur la grande flèche

merci pour votre aide

Salut,
voici un script que je viens de faire qui fait pratiquement la même chose :

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
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="TutorielsjQuery/jquery-1.4.2.min.js"></script>
 
        <script type="text/javascript">
            $(function() {
                var timer;
 
                $('.slide').mousemove(function(e) {
                    var x = e.pageX - this.offsetLeft;
	                var y = e.pageY - this.offsetTop;
 
                    if(x <= 50) {
                        $(this).children('.flecheGauche').show();
                        $(this).children('.flecheDroite').hide();
                    }
                    else if(x >= 200) {
                        $(this).children('.flecheDroite').show();
                        $(this).children('.flecheGauche').hide();
                    }
                    else {
                        $(this).children('.flecheGauche').hide();
                        $(this).children('.flecheDroite').hide();
                    }
                });
 
                $('.slide').click(function(e) {
                    var x = e.pageX - this.offsetLeft;
	                var y = e.pageY - this.offsetTop;
 
                    if(x <= 50) { //Si l’utilisateur clique sur la flèche de gauche.
                        animerInverse();
                    }
                    else if(x >= 200) { //Si l’utilisateur clique sur la flèche de droite.
                        animer();
                    }
                });
 
                $('.slide').mouseout(function() {
                    $(this).children('.flecheGauche').hide();
                    $(this).children('.flecheDroite').hide();
                });
 
                function animer() {
                    $('.slide').animate({'background-position': '+=250'}, 500, function() {
                        if($('.slide').css('background-position') == 1000) {
                            $('.slide').css('background-position', 0);
                        }
                    });
                }
 
                function animerInverse() {
                    $('.slide').animate({'background-position': '-=250'}, 500, function() {
                        if($('.slide').css('background-position') == 0) {
                            $('.slide').css('background-position', 750);
                        }
                    });
                }
 
                timer = setInterval(animer, 5000);
            });
        </script>
 
        <style language="text/css">
            .slide {
                background-image: url('image.png');
 
                height: 250px;
                width: 250px;
 
                position: relative;
            }
 
            .flecheGauche {
                display: none;
 
                position: absolute;
                background-image: url('flecheGauche.png');
 
                height: 250px;
                width: 50px;
            }
 
            .flecheDroite {
                display: none;
 
                position: absolute;
                background-image: url('flecheDroite.png');
 
                right: 0px;
 
                height: 250px;
                width: 50px;
            }
        </style>
    </head>
    <body>
        <div class="slide">
            <div class="flecheGauche"></div>
            <div class="flecheDroite"></div>
        </div>
    </body>
</html>

Bien sûr, il faudra adapter la taille des images…

Il y a seulement un petit problème :
lorsque l’on clique sur la flèche, le timer n’est pas relancé, donc la prochaine image peut s’afficher rapidement.

Voici les images que j’ai utilisées pour mes tests :

image.png : http://img830.imageshack.us/img830/1840/imageqe.png

flecheGauche.png : http://img842.imageshack.us/img842/5...echegauche.png

flecheDroite.png : http://img169.imageshack.us/img169/1...chedroiteb.png

Donc, n’oublie pas d’adapter la taille un peu partout dans le code.

Si tu as besoin d’explications supplémentaires, n’hésites pas à demander.

À plus !

Bonjour et merci pour la réponse,

j'ai deux questions :

1 -comment fait-on pour relancer le timer quand on clique sur le flèche j'ai fait comme ça mais apparement ça ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
 
 function animer() {
                    $('.slide').animate({'background-position': '+=850'}, 500, function() {
                        if($('.slide').css('background-position') == 1000) {
                            $('.slide').css('background-position', 0);
 
                        }
				timer = setInterval(animer, 5000);		
                    });
                }

2- Comment fait on si je veux utiliser 4 images c'est à dire je voudrais faire défiler 4 images par exemple car dans la classe slide il n' y a qu'un seul image

Code:

1
2
3
4
5
6
7
8
9
 
 .slide {
                background-image: url('image.png');
 
                height: 250px;
                width: 250px;
 
                position: relative;
            }

merci d'avance

Salut,
pour la première question, il faut arrêter le timer (clearTimeout()) et le relancer (setInterval()).

Comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function animer() {
$('.slide').animate({'background-position': '+=250'}, 500, function() {
    if($('.slide').css('background-position') == 1000) {
        $('.slide').css('background-position', 0);
    }
    //Relancer le timer.
    clearTimeout(timer);
    timer = setInterval(animer, 5000);
    });
}
 
function animerInverse() {
    $('.slide').animate({'background-position': '-=250'}, 500, function() {
        if($('.slide').css('background-position') == 0) {
            $('.slide').css('background-position', 750);
        }
        clearTimeout(timer);
        timer = setInterval(animer, 5000);
    });
}

Pour la deuxième question, le mieux est de faire un sprite (toutes les images dans une seule − ce que j’ai fait).
Parce que si on utilise plusieurs images, je ne vois pas trop comment faire l’animation.

À plus !

25/10/2010, 10h04
stomerfull

Bonjour et merci pour votre réponse

Là j'ai implémenter le code que vous avez suggérer et ça marche bien

Par contre sur le site référence il y a le lien "LEARN MORE"

Comment pourrais-je insérer le lien qui change(l'url du lien) à chaque image qui défile vue que notre image ici est un seul image? est-ce possible de gérer l'url ou pointe le lien à chaque changement d'image ou dois-je trouver la solution sur le plusieurs images?

merci d'avance
27/10/2010, 05h03
antoyo

Salut,
je crois que le mieux serait d’utiliser le plugin jQuery Cycle.
À plus !