Une façon de base, et peut-être le plus facile, pour ce faire est avec le Javascript.
Si vous regardez les pages de code source / HTML, mauvais usage du site de votre signature à titre d'exemple, vous aurez une <img> élément / tag pour afficher une image.
Par exemple sur votre page là, vous avez cette image

Et dans votre source que vous avez ce code html qui l'affiche.
<img src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
Maintenant, pour avoir un travail Javascript avec cette image, facilement, nous devons donner à l'image une
id attribut. Ce qui rendra le regard du code comme cela, en supposant qu'on lui donne un id de "jro_pic".
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
Maintenant que nous pouvons facilement obtenir une référence à l'image en Javascript, nous pouvons modifier les propriétés, y compris l'attribut "src", à l'exécution.
Supposons que nous voulons faire défiler les 2 images, et theyre tout dans les "images" dossier comme celui thats là maintenant.
Nous avons d'abord ajouter une nouvelle section de script sous l'image, comme si,
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
//]]></script>
- <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
- <script type="text/javascript">//<![CDATA[
-
- //]]></script>
Ensuite, nous utilisons un Javascript
array pour stocker les adresses des 2 images.
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
//]]></script>
- <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
- <script type="text/javascript">//<![CDATA[
- var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
- //]]></script>
Maintenant que nous avons une liste des adresses d'image à utiliser, nous pouvons ajouter une fonction javascript qui peut être exécuté sur une minuterie, et réglez la minuterie pour toutes les 5 secondes, ou quand il s'agit de Javascript, 5000 millisecondes.
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
var cycle_jro = function()
{
//code here
}
var jro_cycling = setInterval(cycle_jro, 5000);
//]]></script>
- <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
- <script type="text/javascript">//<![CDATA[
- var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
- var cycle_jro = function()
- {
- //code here
- }
- var jro_cycling = setInterval(cycle_jro, 5000);
- //]]></script>
À ce point, nous avons juste une image que l'on peut faire référence, une liste d'images à utiliser, et une horloge qui fait quelque chose toutes les 5 secondes.
Maintenant, si nous faisons les changements suivants, il va vraiment commencer à ressembler à somethings se passe, en supposant que nous avons des images en cours de validité dans le tableau.
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
var cycle_jro = function()
{
var jimg = document.getElementById('jro_pic');
var next_img = jro_images.shift();
jimg.src = next_img;
jro_images.push(next_img);
return;
}
var jro_cycling = setInterval(cycle_jro, 5000);
//]]></script>
- <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro "Jro" Williams" style="border-style:none" />
- <script type="text/javascript">//<![CDATA[
- var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
- var cycle_jro = function()
- {
- var jimg = document.getElementById('jro_pic');
- var next_img = jro_images.shift();
- jimg.src = next_img;
- jro_images.push(next_img);
- return;
- }
- var jro_cycling = setInterval(cycle_jro, 5000);
- //]]></script>
Strong with this one, the sudo is.