Slider horizontal sans fin

Version imprimable

28/10/2008, 11h21
mdr_cedrick

Slider horizontal sans fin

Bonjour à tous,

je viens vous demander de l'aide pour une petite recherche

j'ai trouvé un slider horizontal super sympa "Accessible News Slider", qui fonctionne super bien
or quand on arrive au bout de ce que l'on veut faire défiler il faut repartir dans l'autre sens ...
je recherche donc un slider qui revient au début automatiquement quand on arrive au bout, pour avoir une sorte de défilement sans fin

merci de votre aide ;)
28/10/2008, 11h25
Auteur

bonjour,

ces exemples (n°2 et n°3) répondent à ton problème ?
28/10/2008, 11h39
mdr_cedrick

non pas exactement
car j'ai des images qui défilent par groupe de 3 quand je clique sur un bouton (lien), c'est le javascript qui gère ça
or quand j'arrive à mes dernières images, si je clique sur suivant je n'ai plus rien, et j'aimerais que dans le principe ça revienne aux premières images

j'ai trouvé un exemple sympa sur ce site http://www.carte-ls.fr/carte-harmonie-14.html
hormis le fait que ça défile tout seul (ça ne m'intéresse pas), si vous regardez bien au bout d'un moment on revient sur les mêmes images et du coup ça tourne sans fin
28/10/2008, 13h19
SpaceFrog

rien ne t'empêche de rajouter quelques lignes aux scripts proposés afin d'ajouter le feature sans fin ...

et bien si l'un d'entre vous est assez calé en JS pour au moins m'éclairer sur le "comment qu'on fait" je suis preneur
voici le js "éditable"

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
var aNewsSlider = {
    itemWidth: 0,
    init: function(s,p) {
        jQuery(".messaging",p).css("display","none");
        itemLength = jQuery(".item",p).length;
        if (jQuery(".view_all",p).width() == null) {
           //jQuery(".news_items",p).prepend("<p class='view_all'>" + s.newsHeadline + " [ " + itemLength + " total ] &nbsp;-&nbsp; <a href='#'>View All</a></p>");
        }
        newsContainerWidth = itemLength * aNewsSlider.itemWidth;
        jQuery(".container",p).css("width",newsContainerWidth + "px");
        jQuery(".next",p).css("display","block");
        animating = false;
 
		  /*******/
 
        jQuery(".next",p).click(function() {
            if (animating == false)
				{
                animating = true;
                animateLeft = parseInt(jQuery(".container",p).css("left")) - (aNewsSlider.itemWidth * decalage);
                if (animateLeft + parseInt(jQuery(".container",p).css("width")) > 0) {
                    jQuery(".prev",p).css("display","block");
                    jQuery(".container",p).animate({left: animateLeft}, s.newsSpeed, function()
						 {	
                        jQuery(this).css("left",animateLeft);
                        if (parseInt(jQuery(".container",p).css("left")) + parseInt(jQuery(".container",p).css("width")) <= aNewsSlider.itemWidth * decalage)
								{
										jQuery(".next",p).css("display","none");
                        }
                        animating = false;
                    });
                } else {
                    animating = false;
                }
            }
            return false;
        });
 
		  /*******/
 
        jQuery(".prev",p).click(function() {
            if (animating == false) {
                animating = true;
                animateLeft = parseInt(jQuery(".container",p).css("left")) + (aNewsSlider.itemWidth * decalage);
                if ((animateLeft + parseInt(jQuery(".container",p).css("width"))) <= parseInt(jQuery(".container",p).css("width"))) {
                    jQuery(".next",p).css("display","block");
                    jQuery(".container",p).animate({left: animateLeft}, s.newsSpeed, function() {
                        jQuery(this).css("left",animateLeft);
                        if (parseInt(jQuery(".container",p).css("left")) == 0)
								{
                            jQuery(".prev",p).css("display","none");
                        }
                        animating = false;
                    });
                } else {
                    animating = false;
                }
            }
            return false;
        });
    },
    vAll: function(s,p) {
        var o = p;
        while (p) {
            p = p.parentNode;
            if (jQuery(p).attr("class") != undefined && jQuery(p).attr("class").indexOf("news_slider") != -1) {
                break;
            }
        }
        if (jQuery(o).text().indexOf("View All") != -1)
		 {
           jQuery(".next",p).css("display","none");
            jQuery(".prev",p).css("display","none");
            jQuery(o).text("View Less");
            jQuery(".container",p).css("left","0px").css("width",aNewsSlider.itemWidth * 2 + "px");
        } else {
            jQuery(o).text("View All");
            aNewsSlider.init(s,p);
        }
    }
};

28/10/2008, 14h38
le_chomeur

en jquery :oops:
je suis en train de tenter de refaire un script dans le même genre , ça arrive dans l'après midi :)

voici un premier jet :

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	.slideIn{
		overflow:hidden;
		width:500px;
		height:300px;
		background-color:green;
		position:relative;
	}
	.slideIn div{
		width:100%;
		height:300px;
		position:absolute;
		display:none;
	}
</style>
<script type="text/javascript">
 
var SlideIn = {
	//Id du conteneur
	idObj : null
	,
	timer : null
	,
	from : null
	,
	to : null
	,
	direction : null
	,
	//Tableau d'élément a déplacé
	elementToSlide : new Array()
	,
	//Index de l'élément en cours
	currentIndex : 0
	,
	$:function(element){
		return document.getElementById(element);
	}
	,
	SlideToLeft : function(){
		if(this.timer != null){
			clearTimeout(this.timer);
			this.timer = null;
		}
		//On vérifit la direction pour initialiser le positionnement
		if(this.direction != 'left'){
			this.direction = 'left';
			this.Positionne();
		}
		//Si le timer n'est pas finit on détruit l'ancienne div
		if(parseInt(this.from.style.left) == Number.NaN || (parseInt(this.from.offsetWidth) + parseInt(this.from.style.left))> 0){
			this.from.style.left = parseInt(this.from.style.left) - 20 + "px";
			this.to.style.left  =parseInt(this.to.style.left) - 20 + "px";
			//alert((parseInt(this.$(from).offsetWidth) + parseInt(this.$(from).style.left)));
			var me = this ;
			this.timer = setTimeout(function(){me.SlideToLeft()},30);
		}
		else{
			clearTimeout(this.timer);
			this.timer = null;
			this.currentIndex = (this.currentIndex == (this.elementToSlide.length-1)) ? 0:this.currentIndex + 1;
			this.$('debug').innerHTML = this.currentIndex;
			this.Positionne();
			//TimerRunning = false;
			//$(smallMenu).parentNode.removeChild($(smallMenu));
		}
	}
	,
	SlideToRight : function(){
		if(this.timer != null){
			clearTimeout(this.timer);
			this.timer = null;
		}
		if(this.direction != 'right'){
			this.direction = 'right';
			this.Positionne();
		}
		//Si le timer n'est pas finit on détruit l'ancienne div
		if(parseInt(this.from.style.left) == Number.NaN ||  parseInt(this.from.style.left) < parseInt(this.from.offsetWidth)){
			this.from.style.left = parseInt(this.from.style.left) + 20 + "px";
			this.to.style.left  =parseInt(this.to.style.left) + 20 + "px";
			//alert((parseInt(this.$(from).offsetWidth) + parseInt(this.$(from).style.left)));
			var me = this ;
			this.timer = setTimeout(function(){me.SlideToRight()},30);
		}
		else{
			clearTimeout(this.timer);
			this.timer = null;
			this.currentIndex = (this.currentIndex == 0) ? this.elementToSlide.length-1:this.currentIndex - 1;
			this.$('debug').innerHTML = this.currentIndex;
			this.Positionne();
		}
	}
	,
	//Fonction initialisant le tableau en positionnant tous les éléments :)
	Positionne : function(){
		if(this.direction == 'left'){
			//On vérifit que l'on est pas a la fin sinon le premier devient le dernier
			if(this.currentIndex == this.elementToSlide.length-1){
				//récupération des éléments : 
				this.from = this.$(this.elementToSlide[this.currentIndex]);
				this.to = this.$(this.elementToSlide[0]); //Premier élément
			}
			else{
				this.from = this.$(this.elementToSlide[this.currentIndex]);
				this.to = this.$(this.elementToSlide[this.currentIndex + 1]);
			}
				this.from.style.display = "block" ;
				this.from.style.left = 0 + "px";
				this.to.style.left = this.from.offsetWidth + "px";
				this.to.style.display = "block"
		}
		else{
			if(this.currentIndex == 0){
				this.from = this.$(this.elementToSlide[this.currentIndex]);
				this.to = this.$(this.elementToSlide[this.elementToSlide.length-1]); // dernier élément
			}
			else{
				this.from = this.$(this.elementToSlide[this.currentIndex]);
				this.to = this.$(this.elementToSlide[this.currentIndex-1]);
			}
			this.from.style.display = "block" ;
			this.from.style.left = 0 + "px";
			this.to.style.left = - (this.from.offsetWidth )+ "px";
			this.to.style.display = "block";
		}
	}
 
}
 
var newSlide = new SlideIn;
 
newSlide.elementToSlide.push('la1');
newSlide.elementToSlide.push('la2');
newSlide.elementToSlide.push('la3');
newSlide.elementToSlide.push('la4');
newSlide.elementToSlide.push('la5');
newSlide.elementToSlide.push('la6');
 
</script>
</head>
<body>
 
<div class="slideIn">
	<div id="la1" style="background-color:red;left:0px;"></div>
	<div id="la2" style="background-color:blue;left:0px;">la</div>
	<div id="la3" style="background-color:#ccc;left:0px;">la</div>
	<div id="la4" style="background-color:yellow;left:0px;"></div>
	<div id="la5" style="background-color:black;left:0px;">la</div>
	<div id="la6" style="background-color:pink;left:0px;">la</div>
</div>
<input type="button" value="gauche" onclick="newSlide.SlideToLeft()">
<input type="button" value="droite" onclick="newSlide.SlideToRight()">
<span id="debug"></span>
</body>
</html>

assez simple a comprendre , tu as des divs que tu place dans un conteneur, dans ces div tu met ce que tu veux ... et en appuyant sur les boutons , ça défile :)

c'est un premier jet , je cherche comment créer plusieurs instanciation de l'objet SlideIn

29/10/2008, 09h49
mdr_cedrick

j'ai fini par en trouver sur un site
pas facile à adapter mais ça a le mérite de fonctionner
merci de votre aide
29/10/2008, 10h08
le_chomeur

as tu testés mon code ? je crois qu'il répond a tes besoins ....