Slide en page d'accueil comme sur beaucoup de sites

**antho2601** · 10/05/2010, 15h47

Bonjour,

Je suis en train de créer un site d'actualité, et j'aimerais afficher en haut de la page d'accueil les 3 actualités les plus importantes dans une slide comme ça se fait beaucoup. Après plusieurs recherches je ne trouve pas comment faire.

J'aimerais que ça fasse comme ça :

http://www.musicactu.com/

ou:

http://www.clubic.com/

ou comme ça :

http://www.chartsinfrance.net/

Vous voyez le petit "module" à gauche afin de mettre en valeur les articles.

J'ai un peu regardé le code de clubic et j'ai vu qu'ils utilisaient premium.js, mais j'ai tapé sur Google, mais je ne trouve rien. Sur chartsinfrance c'est hplist.js mais je ne trouve rien non plus.

Je crois que je vais me baser sur le code de clubic et pour le faire. Est-ce que j'ai le droit de prendre leurs librairies ? Ou alors si vous connaissez une façon plus simple, ou un équivalent avec jQuery. Car pour moi c'est un peu difficile, car je débute là dedans.

Merci beaucoup, voilà le code de CLUBIC :

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
<div id="colMiddle">
            <div class="slide_premium">
                <script type="text/javascript" src="/api/js/premium.js"></script>
 
 
<script type='text/javascript'>
$(function() {
	$('#alaune').premium({
		'itemsSelector' : '.list li',
		'viewsSelector' : '.actus .actu',
		'duration' : 'slow',
		'delay' : 10
	});
});
</script>
 
 
<div id="alaune" class="inner">
 
	<ul class="list cf">
		<li>
			<a href="http://www.clubic.com/telecharger/logiciel-maison-et-hobby/article-339466-1-revisions-logiciels-preparer-examens-bac.html" class="show-a">
				<img src="http://img.clubic.com/download/image.php?id=03173006&h=0050&w=005A&crop=1" alt="Examens, Bac : Les logiciels pour préparer vos révisions !" height="83" width="97" />
			</a>
		</li>
		<li>
			<a href="http://www.clubic.com/carte-graphique/carte-graphique-nvidia/article-339266-1-nvidia-optimus-ordinateur-portable.html" class="show-b">
				<img src="http://img.clubic.com/download/image.php?id=03170220&h=0050&w=005A&crop=1" alt="NVIDIA Optimus: autonomie et performance 3D !" height="83" width="97" />
 
			</a>
		</li>
		<li>
			<a href="http://www.clubic.com/carte-mere/chipset-ati-amd/article-337192-1-chipset-amd-890gx.html" class="show-c">
				<img src="http://img.clubic.com/download/image.php?id=03168748&h=0050&w=005A&crop=1" alt="AMD 890GX: chipset avec graphique en test" height="83" width="97" />
			</a>
		</li>                    
	</ul><!-- #shows -->
 
	<div class="actus">        	
		<div class="actu actu3-a">
 
			<div class="visu"><a href="http://www.clubic.com/telecharger/logiciel-maison-et-hobby/article-339466-1-revisions-logiciels-preparer-examens-bac.html"><img src="http://img.clubic.com/photo/015E00FA03173006.jpg" alt="Examens, Bac : Les logiciels pour préparer vos révisions !" height="250" width="350" /></a>
        <div class="descriptif" >
  				<h3><a href="http://www.clubic.com/telecharger/logiciel-maison-et-hobby/article-339466-1-revisions-logiciels-preparer-examens-bac.html">Examens, Bac : Les logiciels pour préparer vos révisions !</a></h3>
  				<p><a href="http://www.clubic.com/telecharger/logiciel-maison-et-hobby/article-339466-1-revisions-logiciels-preparer-examens-bac.html">10 gratuiciels pour préparer vos examens dans les meilleures conditions !</a></p>
  			</div>
      </div>          
		</div><!-- .actu -->
 
		<div class="actu actu3-b" style="display:none;">
 
			<div class="visu"><a href="http://www.clubic.com/carte-graphique/carte-graphique-nvidia/article-339266-1-nvidia-optimus-ordinateur-portable.html"><img src="http://img.clubic.com/photo/015E00FA03170220.jpg" alt="NVIDIA Optimus: autonomie et performance 3D !" height="250" width="350" /></a>
        <div class="descriptif">
  				<h3><a href="http://www.clubic.com/carte-graphique/carte-graphique-nvidia/article-339266-1-nvidia-optimus-ordinateur-portable.html">NVIDIA Optimus: autonomie et performance 3D !</a></h3>
  				<p><a href="http://www.clubic.com/carte-graphique/carte-graphique-nvidia/article-339266-1-nvidia-optimus-ordinateur-portable.html">Découverte de la technologie NVIDIA Optimus à travers l'ordinateur portable Asus UL50Vf.</a></p>
  			</div>
      </div>
		</div><!-- .actu -->
 
		<div class="actu actu3-c" style="display:none;">
			<div class="visu"><a href="http://www.clubic.com/carte-mere/chipset-ati-amd/article-337192-1-chipset-amd-890gx.html"><img src="http://img.clubic.com/photo/015E00FA03168748.jpg" alt="AMD 890GX: chipset avec graphique en test" height="250" width="350" /></a>
  			<div class="descriptif">
  				<h3><a href="http://www.clubic.com/carte-mere/chipset-ati-amd/article-337192-1-chipset-amd-890gx.html">AMD 890GX: chipset avec graphique en test</a></h3>
  				<p><a href="http://www.clubic.com/carte-mere/chipset-ati-amd/article-337192-1-chipset-amd-890gx.html">Retour sur l'AMD 890GX, le nouveau chipset avec graphique intégré et Serial ATA 6 Gb/s d'AMD</a></p>
  			</div>
      </div>
 
		</div><!-- .actu -->                    
	</div>
</div>                <!-- #alaune -->
            </div>
            <div class="bloc_depannage">
                <h3>comment <span>faire</span></h3>
<div class="espace-depannage">
	<div class="ed-stats">Posez votre question, la rédaction ou les membres vous répondent</div>
 
	<ul>
					<li class="">
				<a href="http://www.clubic.com/windows-os/windows-7/aide-probleme/windows-7-comment-partager-une-connexion-internet-en-wifi-2548.html" title="W7 : partager sa connexion en WiFi" >W7 : partager sa connexion en WiFi</a>
			</li>
					<li class="">
				<a href="http://www.clubic.com/windows-os/windows-7/aide-probleme/windows-7-comment-changer-le-mot-de-passe-d-une-session-2516.html" title="W7 : changer son mot de passe" >W7 : changer son mot de passe</a>
			</li>
					<li class="">
 
				<a href="http://www.clubic.com/windows-os/windows-7/aide-probleme/windows-7-comment-retrouver-les-gadgets-vista-2532.html" title="W7 : retrouver les gadgets Vista" >W7 : retrouver les gadgets Vista</a>
			</li>
					<li class="">
				<a href="http://www.clubic.com/composants-pieces-detachees/aide-probleme/windows-identifier-ses-composants-materiels-2534.html" title="Identifier ses composants" >Identifier ses composants</a>
			</li>
					<li class="">
				<a href="http://www.clubic.com/windows-os/windows-7/aide-probleme/configurer-un-vpn-sous-windows-7-et-vista-2550.html" title="W7 et Vista : configurer un VPN" >W7 et Vista : configurer un VPN</a>
 
			</li>
					<li class="last">
				<a href="http://www.clubic.com/windows-os/windows-7/aide-probleme/comment-passer-d-un-clavier-qwerty-a-un-clavier-azerty-ou-inversement-2692.html" title="Passer d'un QWERTY à un AZERTY" >Passer d'un QWERTY à un AZERTY</a>
			</li>
			</ul>

**Boa67** · 10/05/2010, 16h26

Bonjour,

Sur musicactu c'est du flash

Sinon j'ai trouvé quelques liens qui pourraient t'aider : http://webdesignledger.com/tutorials...-and-tutorials

http://www.queness.com/post/222/10-j...slider-plugins

Bon courage

**antho2601** · 10/05/2010, 16h35

Merci beaucoup,

Je crois que j'ai trouvé mon bohnneur :
http://demo.webdeveloperplus.com/fea...ontent-slider/

J'ai pas le temps d'essayer aujourd'hui mais je vous tiens au courant.

Merci beaucoup, j'espère que j'arriverais. Au pire j'en ai vu d'autre pas mal.

Bonne journée

**antho2601** · 11/05/2010, 15h54

Bonjour,

J'ai bien réussi je suis content.
Merci beaucoup.

Seulement j'ai un petit problème.

Dans mon head j'ai plusieurs scripts, et le problème c'est que c'est seulement dernier qui fonctionne. Ceux d'avant ne fonctionne plus. Je ne comprend pas. Comment je peux faire pour qu'ils soit tous pris en compte, parce exemple la vous voyez ou j'ai noté  c'est le script pour le slide en page d'accueil. A cette endroit il ne fonctionne pas. Alors que si je le met tout en bas juste avant le body, et bien ça fonctionne, mais les autres script ne fonctionne plus...

Est-ce que vous auriez une solution svp? merci beaucoup

Voici mon head :

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
<head>
	<title>HoBBy Live | Bienvenue</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="Content-Language" content="fr" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta name="DC.Language" scheme="RFC3066" content="fr" />
	<link rel="stylesheet" type="text/css" href="lib/css/style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="lib/css/style_slide.css" />
 
 
    <!--SLIDE -->
<script type="text/javascript" src="lib/js/jquery.min.js" ></script>
<script type="text/javascript" src="lib/js/jquery-ui.min.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>
 
 
    <script src="lib/js/jquery-1.2.6.min.js" type="text/javascript"></script>
        <script src="lib/js/jquery.curvycorners.min.js" type="text/javascript"></script>
        <script src="lib/js/jquery.lightbox-0.3.js" type="text/javascript"></script>
        <script type="text/javascript">
		var mask2load = new Array();
		mask2load[2] = "lib/js/edge/masks/8bit/softedge.png";
		mask2load[5] = "lib/js/edge/masks/2bit/softedge.gif";
		</script> 
 
        <script type="text/javascript">
    $(function() {
        $('a.light').lightBox();
    });
    </script>
 
        <script type="text/javascript">
            $(function(){
			$('.curvy').corner({
			  tl: false,
			  tr: false,
			  bl: { radius: 16 },
			  br: { radius: 16 },
			  antiAlias: true,
			  autoPad: true,
			  validTags: ["div"] });
			});
		</script>
 
</head>

Slide en page d'accueil comme sur beaucoup de sites

JavaScript

Discussions similaires

Partager

Partager