Titre: Récupérer le code source
Posté par: Soulouf le le 20-12-2012 a 13:55:40
Bonjour,
Ce matin je suis allé sur la page d'acceuil de Google, en arrivant j'ai trouvé un bandeau qui se défile aavec des images si on clique sur les fléchés à droite ou à gauche.
je suis très intéresser car cela fait plusieurs jour que je recherche ce même srtyle de bandeau défilant pour mettre sur mon site en page d'accueil sur les annonces.
Vous ne savez pas quel est le code source ou le script utilisé s'il vous plait ???
Je vous remercie beaucoup |
Titre: Re:Récupérer le code source
Posté par: KB le le 20-12-2012 a 14:01:57
Salut,
fait une recherche sur les slider jquery. |
Titre: Re:Récupérer le code source
Posté par: Soulouf le le 20-12-2012 a 14:08:46
| Je vous remercie beaucoup ! Je vais faire beaucoup de recherche sur ca alors :D |
Titre: Re:Récupérer le code source
Posté par: vieactu le le 20-12-2012 a 14:14:56
| installe firebug sur firefox et récupère html et css :) |
Titre: Re:Récupérer le code source
Posté par: Soulouf le le 20-12-2012 a 20:04:07
Bonjour,
Je vous remercie pour vos réponses.
Je viens de tout essayer et j'en ai marre, je viens de récupérer le code source de cette age
http://www.blogduwebdesign.com/exemples/slider/without-box.html
J'ai pris les images et hebergés sur un serveur hébergement de fichiers et cela me mets les images mais vraiment n'importe quoi voyez vous par là
http://naruto-xd.com/portal.php?pid=16
Quelqu'un n'aurait pas déjà un code source tout fait et que je puisse seulement modifié les images ???
Je ne suis pas un pro en tout ca j'avoue ^^
Je vous remercie beaucoup ! |
Titre: Re:Récupérer le code source
Posté par: Soulouf le le 20-12-2012 a 23:19:07
Me revoilà ! En fait le JavaScript n'etait pas activé sur mon forum, enfin si mais pas sur les messages.
Je l'ai mis sur les templates et cela fonctionne nikel mais j'ai un très gros soucis de décalges d'images !
Venez voir par vois même sur mon fofo
Je vais vous donner le code, vous pourriez me dire ce que je dois ajouter ou modifier s'il vous plait ?
Code:
<!DOCTYPE html>
<!-- saved from url=(0062)file:///C:/Users/Soulouf/Videos/SlideShow_BDW/without-box.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Slider en CSS3 et JS</title>
<style>
<style>
*{
padding:0;
margin:0;
list-style-type:none;
}
#slider{
background:url('resources/background.png');
width:960px;
height:370px;
margin:50px auto;
position:relative;
}
#mask{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.fleche{
position:absolute;
top:145px;
cursor:pointer;
}
#fleche_gauche{
left:-17px;
}
#fleche_droite{
right: -17px;
}
#image_container{
position:absolute;
width:400%;
height:100%;
/* La transition sur tout les navigateurs */
/* Chrome */
-webkit-transition-property:all;
-webkit-transition-duration:1s;
/* Firefox */
-moz-transition-property:all;
-moz-transition-duration:1s;
/* Opera */
transition-property:all;
transition-duration:1s;
}
/* Les différentes positions du slider */
.image1 #image_container{
left:0;
}
.image2 #image_container{
left:-100%;
}
.image3 #image_container{
left:-200%;
}
.image4 #image_container{
left:-300%;
}
/* Les images */
#image_container li{
float:left;
}
/* L'encart Bleu */
#encart{
position:absolute;
top:-15px;
left:200px;
background:url('resources/text.png');
width:328px;
height:396px;
}
#bouton{
position:relative;
width:244px;
height:55px;
margin: 300px 0px 0px 40px;
cursor:pointer;
}
/* Les points de navigation */
#dots{
position:absolute;
width:130px;
height:15px;
left:425px;
bottom:-25px;
}
/* les points, avec leur background non selectionné */
#dots li{
float:left;
margin: 0px 2px;
width:12px;
height:12px;
background: url('resources/empty-dot.png');
cursor:pointer;
}
/* Point au survol */
#dots li:hover{
background: url('resources/selected-dot.png');
}
/* Point "selectionné". De la même manière que l'image, on change en fonction de la classe de slider */
.image1 #dots li.button1, .image2 #dots li.button2, .image3 #dots li.button3, .image4 #dots li.button4{
background: url('resources/selected-dot.png');
cursor:normal;
}
/* Un eyecandy */
#glass{
position:absolute;
top:0px;
left:0px;
}
</style>
<div id="slider" class="image2">
<div id="mask">
<ul id="image_container">
<li><img src="http://img90.xooimage.com/files/f/e/f/bird-3a83f4e.jpg"></li>
<li><img src="http://img92.xooimage.com/files/4/5/8/red_bird-3a83e81.jpg"></li>
<li><img src="http://img93.xooimage.com/files/1/9/7/spring-3a83e8b.jpg"></li>
<li><img src="http://img90.xooimage.com/files/8/a/5/winter-3a83ea0.jpg"></li>
</ul>
</div>
<img src="http://img93.xooimage.com/files/d/a/0/glass-3a83e72.png" id="glass">
<!-- l'encart bleu. Quoter s'il est genant --><!--
<div id="encart">
<img src="resources/bouton.png" id="bouton">
</div>-->
<!-- fin de l'encart -->
<!-- Les fleches de navigations -->
<ul id="dots">
<!-- les petits points qui affichent ou nous en somme sur le slide -->
<li class="button1" onclick="changeImage(1)"></li>
<li class="button2" onclick="changeImage(2)"></li>
<li class="button3" onclick="changeImage(3)"></li>
<li class="button4" onclick="changeImage(4)"></li>
</ul>
<img src="http://img91.xooimage.com/files/8/0/6/fleche-droite-3a84189.png" id="fleche_gauche" class="fleche" onclick="prevImage()">
<img src="http://img94.xooimage.com/files/7/0/f/fleche-gauche-3a8419d.png" id="fleche_droite" class="fleche" onclick="nextImage()">
</div>
<script>
// Des Variables pour pouvoir modifier facilement ce qui doit l'être
var secDuration = 5;
var image = 1;
var maxImages = 4;
var slider = document.getElementById('slider');
var timeout
// La fonction qui change les images. Peut pointer vers une image spécifique, ou bien être appelée vide, pour passer ç celle d'apres
function changeImage(requiredImage) {
// Début de l'algorithme .
if (!requiredImage && requiredImage != 0){ //Si nous n'avons pas spécifié une image
if(image < maxImages){// Si l'image n'est pas la dernière, on avance d'une image
image++;
}
else{
image = 1;//Si Nous sommes sur la dernière, on reviens au début
}
}
else{ // Si nous avont spécifié une image
if(requiredImage > maxImages){//Si nous avont spécifié une image au dela de la dernière, on revient à la première
image = 1;
}
else if(requiredImage < 1){ //Si nous avont spécifié une image 0 ou moins, on vas à la dernière image
image = maxImages;
}
else{
image = requiredImage; // Sinon, on vas à l'image spécifiée.
}
}
//On dis au slider à travers sa classe quel image il doit afficher
slider.className = "image"+image;
// On nettoie et relance le timeout
clearTimeout(timeout)
timeout = setTimeout("changeImage()",secDuration*1000);
}
//Deux petites fonctions tres compréhensibles
function nextImage(){
changeImage(image+1);
}
function prevImage(){
changeImage(image-1);
}
//On met le slide sur l'image par défaut, ici la 1ere
changeImage(1);
|
|
Je vous remercie de votre compréhension.
PS : Mon fofo c'est http://naruto-xd.com/portal.php |
Titre: Re:Récupérer le code source
Posté par: bidouille7 le le 21-12-2012 a 09:41:25
Bonjour. Télécharges " wowslider "et installes-le sur ton ordi. Il est facile à utiliser car tu mets tes images en glisser-déposer. Une fois les images mises, tu auras en cliquant sur "Publier" le code source à mettre sur ta page.
A plus.
PS: Au cas ou tu n'y arrives pas, je pourrai t'aider, tu n'auras que tes images à m'envoyer, et je te donnerai le code. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|