diaporama : Slideshow

**xGio10** · 19/03/2012, 12h00

Salut , je suis débutant dans les site web et je suis entrain de créé mon site perso et je voudrais savoir comment réalisez un diaporama avec dreamweaver car j'ai fais mais page avec dreamweaver . Je voudrais un truc classe et simple

Je vous remercie d'avance .

**Kaamo** · 19/03/2012, 13h44

Il y a beaucoup d'exemples sur internet qui sont accessibles aux débutants. Sinon, en voici deux que j'ai adopté, très simples d'utilisation et complet :

Html5 Slides : pour les diaporamas "pro"
Highslide : pour les images

**Bovino** · 19/03/2012, 15h04

http://lmgtfy.com/?q=Slideshow

**xGio10** · 19/03/2012, 15h08

Tes diaporama me plait beaucoup , mais ce n'est pas sa que je recherche c'est un exemple comme ceci http://soledinapoli.be/check.php?v=fr simple et qui change tout seul .

Merci d'avance je galére a trouver je m'y connais pas

**Kaamo** · 20/03/2012, 11h17

Et bien en regardant simplement le code source de cette page, tu te rendras compte qu'un script est utilisé pour faire ceci.
De plus, les commentaires permettent de le comprendre.

**xGio10** · 20/03/2012, 12h33

il y a pas moyen que vous me procurez un script slideshow ? J'ai inspecter l'élément mais je c'est pas comment le prendre le script

**Kaamo** · 20/03/2012, 13h28

en cherchant "javascript défilement image", il y a plein d'exemples déjà prêts et simple d'utilisation. Il suffit juste de les adapter à votre fonctionnement.

**xGio10** · 20/03/2012, 15h12

Voila j'ai trouver un scripte mais je ne c'est pas si c'est bon , comment mettre mes images a moi et l'introduire dans ma page ( je travaille avec dreamweaver sa ne cause pas de problémes ? )

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script language="JavaScript">
var temp=600
var nbr_de_cellule=6
var xx=nbr_de_cellule-1
var suivi=0
tbimage=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06","d8","d8_02","d8_03","d8_04","d8_05","d8_06","d10","d10_02","d10_03","d10_04","d10_05","d10_06","d1","d1_02","d1_03","d1_04","d1_05","d1_06","d2","d2_02","d2_03","d2_04","d2_05","d2_06","d3","d4","d4_02","d4_03","d4_04","d4_05","d4_06","d5","d5_02","d5_03","d5_04","d5_05","d5_06","d6","d6_02","d6_03","d6_04","d6_05","d6_06")
tblien=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06","d8","d8_02","d8_03","d8_04","d8_05","d8_06","d10","d10_02","d10_03","d10_04","d10_05","d10_06","d1","d1_02","d1_03","d1_04","d1_05","d1_06","d2","d2_02","d2_03","d2_04","d2_05","d2_06","d3","d4","d4_02","d4_03","d4_04","d4_05","d4_06","d5","d5_02","d5_03","d5_04","d5_05","d5_06","d6","d6_02","d6_03","d6_04","d6_05","d6_06")
function function1() {
if(xx>=tbimage.length-1){
xx=xx-tbimage.length
}
xx++
document.getElementById("ntab").rows[0].insertCell(nbr_de_cellule)
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].appendChild(document.createElement('a')).href='images/'+tblien[xx]+'.jpg';
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.appendChild(document.createElement('img'));
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.lastChild.style.height=150+"px"
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.lastChild.src='images/'+tbimage[xx]+'.jpg'
document.getElementById("ntab").rows[0].deleteCell(0)
}
function function2() {
if(xx<=0){
xx=tbimage.length+(xx)
}
xx--
document.getElementById("ntab").rows[0].insertCell(0)
document.getElementById("ntab").rows[0].cells[0].appendChild(document.createElement('a')).href='images/'+tblien[xx]+'.jpg';
document.getElementById("ntab").rows[0].cells[0].lastChild.appendChild(document.createElement('img'));
document.getElementById("ntab").rows[0].cells[0].lastChild.lastChild.style.height=150+"px"
document.getElementById("ntab").rows[0].cells[0].lastChild.lastChild.src='images/'+tbimage[xx]+'.jpg'
document.getElementById("ntab").rows[0].deleteCell(nbr_de_cellule)
}
function aller() {
if(suivi==0){
suivi=1
bozo=setInterval('function1()',temp)
}
else{
clearInterval(bozo)
suivi=0
}
}
 
function retour() {
if(suivi==0){
xx=xx-(nbr_de_cellule-1)
suivi=1
bozo=setInterval('function2()',temp)
}
else{
clearInterval(bozo)
xx=xx+(nbr_de_cellule-1)
suivi=0
}
}
</script>
<div align='center'>
<table id="ntab" border='no'  rules='none'>
   <tr  id='fg'>
<td> <a href='images/d7.jpg'> <img src='images/d7.jpg' height=150></a> </td>
<td> <a href='images/d7_02.jpg'> <img src='images/d7_02.jpg' height=150> </a> </td>
<td> <a href='images/d7_03.jpg'> <img src='images/d7_03.jpg' height=150> </a> </td>
<td> <a href='images/d7_04.jpg'> <img src='images/d7_04.jpg' height=150> </a> </td>
<td> <a href='images/d7_05.jpg'> <img src='images/d7_05.jpg' height=150> </a> </td>
<td> <a href='images/d7_06.jpg'> <img src='images/d7_06.jpg' height=150> </a> </td>
</tr>
</table>
<div align='center'>
<img src='retour2.jpg' onmouseover='aller();this.src="retour.jpg"' onmouseout='aller();this.src="retour2.jpg"'>
<img src='aller2.jpg' onmouseover='retour();this.src="aller.jpg"' onmouseout='retour();this.src="aller2.jpg"'>
</div>
</div>
</body>
</html>

diaporama : Slideshow

HTML

Vue hybride

Discussions similaires

Partager

Partager