ICI header("Location: http://www.mytesting.fr ");

REALISER UN SLIDE SHOW FIXE OU A DEFILEMENT AUTOMATIQUE.

par André MARINI 19 Janvier 2017, 09:48 Images

Une fois n'est pas coutume, nous commençons par le javascript.

 

En marron, le javascript

En bleu, le HTML

En noir, l'adresse de mes photos

 

On remarque que la première image doit occuper la place et qu'elle est donc cotée deux fois.

 

CODE

<SCRIPT LANGUAGE="JavaScript">
var rotate_delay = 2000;
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
//  End -->
</script>

<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="white">
<b>Image Slideshow</b>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=400 height=450>
<img src="
http://img.over-blog-kiwi.com/1/30/51/51/20170119/ob_6d1afc_gr1.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="
http://img.over-blog-kiwi.com/1/30/51/51/20170119/ob_6d1afc_gr1.jpg" selected>image 1
<option value="
http://img.over-blog-kiwi.com/1/30/51/51/20170119/ob_0c3619_gr3.jpg">image 2
<option value="
http://img.over-blog-kiwi.com/1/30/51/51/20170119/ob_02b2ce_gr5.jpg">image 3
<option value=
"http://img.over-blog-kiwi.com/1/30/51/51/20170119/ob_d2865d_gr7.jpg">image 4
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<input type=button onClick="first();" value="I<<" title="Début">
<input type=button onClick="previous();" value="<<" title="Précédent">
<input type=button name="slidebutton" onClick="ap(this.value);" value="I>" title="Lecture">
<input type=button onClick="next();" value=">>" title="Suivant">
<input type=button onClick="last();" value=">>I" title="Fin">
</td>
</tr>
</table>
</form>

RESULTAT

 

Pour voir le slide image par image, à son rythme, cliquer sur photo 1, puis 2 etc...

Pour faire défiler le slide, cliquer sur I> puis laisser défiler.

Les flèches intermédiaires permettent de revenir à la photo précédente ou suivante, les flèches extrêmes permettent de revenir à la première ou à la dernière photo.

 

On peut modifier la valeur de rotate_delay pour accélérer ou ralentir le défilement.

 

 

Image Slideshow

commentaires

Haut de page