|
La Communauté Webmaster 
| Pages: [1] |
 |
|
|
|
 Auteur |
Sujet: Récupérer le code source (Lu 3184 fois) |
|
 |
Récupérer le code source
« sur: le 20-12-2012 a 13:55:40 » |
|
|
|
|
|
|
|
Re:Récupérer le code source
« Répondre #1 sur: le 20-12-2012 a 14:01:57 » |
|
|
|
|
|
Re:Récupérer le code source
« Répondre #2 sur: le 20-12-2012 a 14:08:46 » |
|
|
|
|
|
Re:Récupérer le code source
« Répondre #3 sur: le 20-12-2012 a 14:14:56 » |
|
|
|
|
|
Re:Récupérer le code source
« Répondre #4 sur: le 20-12-2012 a 20:04:07 » |
|
|
|
|
|
Re:Récupérer le code source
« Répondre #5 sur: le 20-12-2012 a 23:19:07 » |
|
Soulouf
Membre récent
 Hors-Ligne
Sexe: 
Messages: 4
 
|
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 ?
<!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 |
|
|
|
|
|
Re:Récupérer le code source
« Répondre #6 sur: le 21-12-2012 a 09:41:25 » |
|
|
|
|
| Pages:
[1] |
 |
|
|
| |
|
|
