plugin wSlide, défilement automatique

**helooo** · 08/11/2010, 14h27

Bonjour,

j'utilise le wslide de jquery pour afficher des actualités, mais je voudrais qu'elles défilent automatiquement. J'ai donc essayé de caser un setInterval mais je ne dois pas le mettre au bon endroit.
Quelqu'un a til déjà fais sa ?? ou peut il m'aider ???

Voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
 <script type="text/javascript">
$(document).ready(function(){//on attend que la page soit chargée
        //on donne l'id de la liste visée, et on lui donne ses paramètres
        $("#liste-news").wslide({
                width: 530,
                height: 130,
                horiz: true
        });
});
</script>

et le code de la librairie :

Code :

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
112
113
114
115
116
117
118
119
120
/**
 * wSlide 0.1 - http://www.webinventif.fr/wslide-plugin/
 * 
 * Rendez vos sites glissant !
 *
 * Copyright (c) 2008 Julien Chauvin (webinventif.fr)
 * Licensed under the Creative Commons License:
 * http://creativecommons.org/licenses/by/3.0/
 *
 * Date: 2008-01-27
 */
(function($){
    $.fn.wslide = function(h){
        h = jQuery.extend({
            width: 150,
			height: 150,
			pos: 1,
			col: 1,
			effect: 'swing',
			fade: false,
			horiz: false,
			autolink: true,
			duration: 1500
        }, h);
 
        function gogogo(g){
            g.each(function(i){
                var a = $(this);
				var uniqid = a.attr('id');
				if(uniqid == undefined){
					uniqid = 'wslide'+i;
				}
				$(this).wrap('<div class="wslide-wrap" id="'+uniqid+'-wrap"></div>');
				a = $('#'+uniqid+'-wrap');
				var b = a.find('ul li');
               	var effets = h.effect;
				if(jQuery.easing.easeInQuad == undefined && (effets!='swing' || effets!='normal')){
					effets = 'swing';
				}
				var typex = h.width;
				var typey = h.height;
				function resultante(prop){
					var tempcalc = prop;
					tempcalc = tempcalc.split('px');
					tempcalc = tempcalc[0];
					return Number(tempcalc);
				}
				var litypex = typex-(resultante(b.css('padding-left'))+resultante(b.css('padding-right')));
				var litypey = typey-(resultante(b.css('padding-top'))+resultante(b.css('padding-bottom')));
				var col = h.col;
				if(h.horiz){
					col =  Number(b.length+1);
				}
				var manip = '';
				var ligne = Math.ceil(Number(b.length)/col);
				a.css('overflow','hidden').css('position','relative').css('text-align','left').css('height',typey+'px').css('width',typex+'px').css('margin','0').css('padding','0');
				a.find('ul').css('position','absolute').css('margin','0').css('padding','0').css('width',Number((col+0)*typex)+'px').css('height',Number(ligne*typey)+'px');
				b.css('display','block').css('overflow','hidden').css('float','left').css('height',litypey+'px').css('width',litypex+'px');
				b.each(function (i) {
					var offset = a.offset();
					var thisoffset = $(this).offset();
					$(this).attr('id',uniqid+'-'+Number(i+1)).attr('rel', Number(thisoffset.left-offset.left)+':'+Number(thisoffset.top-offset.top));
					manip += ' <a href="#'+uniqid+'-'+Number(i+1)+'">'+Number(i+1)+'</a>';
				});
 
				if(typeof h.autolink == 'boolean'){
					if(h.autolink){
						a.after('<div class="wslide-menu" id="'+uniqid+'-menu">'+manip+'</div>');
					}
				}else if (typeof h.autolink == 'string'){
					if($('#'+h.autolink).length){
						$('#'+h.autolink).html(manip);
					}else{
						a.after('<div id="#'+h.autolink+'">'+manip+'</div>');
					}
				}
				var start = '#'+uniqid+'-';
				var stoccurent = "";
				$('a[href*="'+start+'"]').click(function () { 
						$('a[href*="'+stoccurent+'"]').removeClass("wactive");
						$(this).addClass("wactive");
						var tri = $(this).attr('href');
						tri=tri.split('#');
						tri='#'+tri[1];
						stoccurent = tri;
						var decal = $(tri).attr('rel');
						decal = decal.split(':');
						var decal2 = decal[1];
						decal2 = -decal2;
						decal = decal[0];
						decal = -decal;
						if(h.fade){
							a.find('ul').animate({ opacity: 0 }, h.duration/2, effets, function(){$(this).css('top',decal2+'px').css('left',decal+'px');$(this).animate({ opacity: 1 }, h.duration/2, effets)} );
						}else{
							a.find('ul').animate({ top: decal2+'px',left: decal+'px' }, h.duration, effets );
						}
						return false;
				});
				if(h.pos <= 0){
					h.pos = 1;
				}
				$('a[href$="'+start+h.pos+'"]').addClass("wactive");
				var tri = $('a[href*="'+start+'"]:eq('+Number(h.pos-1)+')').attr('href');
				tri=tri.split('#');
				tri='#'+tri[1];
				stoccurent = tri;
				var decal = $(tri).attr('rel');
				decal = decal.split(':');
				var decal2 = decal[1];
				decal2 = -decal2;
				decal = decal[0];
				decal = -decal;
				a.find('ul').css('top',decal2+'px').css('left',decal+'px');
 
            })
        }
        gogogo(this);
		return this;
    }
})(jQuery);

**scourjean** · 08/11/2010, 15h06

Essaye d'ajouter cette fonction là avec un setInterval

Code :

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
function majActu()
{
	var current = 0;
	var nbPages = 0;
	$(".wslide-menu a").each(function(cpt){
		if ($(this).hasClass("wactive"))
			current = cpt;
			nbPages++;
	});
	if (current > 0 && current <nbPages)
	{
		$(".wslide-menu a:eq("+parseInt(current+1)+")").click();
	}
	if (current > 0 && current == nbPages)
	{
		$(".wslide-menu a:eq(1)").click();
	}
}

**dg_dev** · 11/11/2010, 08h55

Bonjour,
Je reprends votre échange qui correspond à ce que je cherche.
Pourriez-vous me dire qu'elle a été la solution finalement apporté ?
D'avance merci de votre aide,
Dg_Dev

**Ouglaak** · 23/11/2010, 17h47

Lorsque j'ai essayé la solution de scourjean, elle n'a tout d'abord pas fonctionné.

J'avais 2 problèmes :
- Pas de démarrage automatique.
- Arrivé à ma dernière image, pas de retour à la première.

Après avoir bidouillé, voici la fonction qui marche chez moi :

Code :

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
 
function majActu()
{
	var current = 0;
	var nbPages = 0;
	$(".wslide-menu a").each(function(cpt){
		if ($(this).hasClass("wactive"))
			current = cpt;
			nbPages++;
	});
	if (current >= 0 && current <nbPages)
	{
		$(".wslide-menu a:eq("+parseInt(current+1)+")").click();
	}
	if (current > 0 && current >= (nbPages-1))
	{
		$(".wslide-menu a:eq(0)").click();
	}
}

Plus qu'à coller un setInterval et hop

Code :

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

1
2
 
window.setInterval('majActu()', 5000);

**helooo** · 28/11/2010, 11h15

merci beaucoup pour vos réponse, c'est bon j'ai réussi !! Voici ce que j'ai ajouté :

Code :

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
$(document).ready(function(){
        $("#prod-der").wslide({
                width: 130,
                horiz: true
        });
});
$(document).ready(function(){
	var position = 1;
	function mouve() {
		position++;
		var start = '#prod-der-'+position;
		$('a[href*="'+start+'"]').click();
		if(position == 6) position = 0;
		setTimeout(function() {
				mouve();
				},3600);
	}
	setTimeout(function() {
				mouve();
				},3600);
});

plugin wSlide, défilement automatique

jQuery

Discussions similaires

Partager

Partager