Il est possible par exemple de changer en Jquery l’image affectée à l’élément <img /> en modifiant son attribut « src « .

Ici on affecte l’image monimage.jpg à l’élément img d’identifiant #mon_image :

$("#mon_image").attr('src','monimage.jpg');  

Exemple de modification d’une image au survol de la souris (événement hover) 

Code HTML :

<img id="mon_image" src="monimage2.jpg" alt="survolez cette image "/>

Code JQuery :

$("#mon_image").hover(
   function () {
     $(this).attr('src','monimage1.jpg');  
   },
   function () {
      $(this).attr('src','monimage2.jpg');  
   }
); 

Exemple :

function ParcourirLesImagesDuReperoire($rep){  
    $Myrep = opendir($rep) or die('Erreur : répertoire non trouvé : '.$rep);
    echo '<ul>';
    while($Entry = @readdir($Myrep)) {
       if(!(is_dir($rep.'/'.$Entry)&& $Entry != '.' && $Entry != '..')) {
            $extension=strtolower(strrchr($Entry,'.'));
            if (in_array ($extension, array ('.gif','.jpg','.jpeg','.png'))){
              echo '<li>'.$Entry.'</li>';
            }
        }
    }
    echo '</ul>';
    closedir($Myrep);  
}

La fonction glob() :

La fonction PHP native glob() parcourt un dossier et stocke dans un tableau les noms des fichiers correspondant au pattern passé en paramètre.

$images=glob('images/*.{jpg,png,gif}', GLOB_BRACE);

$images contiendra le tableau de tous les fichiers d’extension jpg, png, gif présents dans le répertoire « image ».

Trier les images par date de dernière modification :

Voici le code qui permet de parcourir les fichiers  d’extension jpg, png ou gif du répertoire « images/ » en les affichant par ordre de date de dernière modification décroissante.

<?php
$dir = "images/";
chdir($dir);
array_multisort(array_map('filemtime', ($files = glob("*.{jpg,png,gif}", GLOB_BRACE))), SORT_DESC, $files);
foreach($files as $filename)
{
    echo "<li>".substr($filename, 0, -4)."</li>"; 
} 
?>

Le principe : Lors du survol de #monimage dont le background est ‘image1.png’ un élément div temporaire (#temp) est créé #temp dont le background est ‘image2.png’. On affiche cet élément en fondu grâce  la fonction animate de JQuery. Il est possible d’optimiser le chargement de l’image en utilisant les sprites (inclure image1.ppng et image2.png dans la même image et jouer sur la position du background lors de l’affichage)

Petit exemple ici

Code CSS :

#monimage{
background:url('image1.png') no-repeat top left;
}

Code JQuery  :

<script>
$("#monimage").hover(
  function(){
   // La souris passe sur l'élément
   $("#temp").remove()
   $(this).append("<div id='temp'></div>"); // Création d'un div temporaire qui va héberger l'image en surimpression
   bgimg = "url(image2.png)";
   $(this).find("#temp").css({position:"absolute",background:"transparent "+bgimg+" no-repeat",opacity:0});
   $(this).find("#temp").stop().animate({opacity:1},500);  }, 
function(){

   // La souris sort de l'élément
     $(this).find("#temp").stop().animate({opacity:0},500,function(){$(this).remove()});
  }
)
</script>

Voir le code sur CodePen

Code HTML :

<div id="bandeau_vertical" style="position:relative;width:150px;height:600px;border:1px solid black;overflow:hidden;">
 </div>
<div id="bandeau_horizontal" style="position:relative;width:600px;height:150px;border:1px solid black;overflow:hidden;">
</div>

Code javascript :

</script>
// Fonction de défilement horizontal
// el est l'élément HTML qui contiendra le contenu défilant
// src est un tableau comprenant le chemin des images à faire défiler
// pas est le pas d'incrémentation du défilement (défaut 1px)
// tps est le temps entre deux incrémentations  (défaut 50ms)

function defilImgHrz(el,srcs,pas,tps) {
  if(typeof el=="string") { el = document.getElementById(el); }
  var tps = tps || 50;
  var pas = pas || 1;
  var imgs = [];
  var offset = 0;
  for(var i=0,l=srcs.length;i<l;i++) {
    var img = new Image();
    img.src = srcs[i];
    imgs.push(img);
    img.style.height=el.offsetHeight+"px";
    img.style.position = "absolute";
    img.style.left = offset+"px";
    el.appendChild(img);
    offset += img.offsetWidth;
  }
  var first = 0;
  var last = imgs.length-1;

  (function d() {
    for(var i=0,l=imgs.length;i<l;i++) {
      var left = parseInt(imgs[i].style.left,10);
      imgs[i].style.left = (left-pas)+"px";
      if(i==first && (left-pas+imgs[i].offsetWidth)<0) {
        imgs[i].style.left = 
        (parseInt(imgs[last].style.left,10)+imgs[last].offsetWidth-(i==0?pas:0))+"px";
        last = first++;
        if(first>imgs.length-1) { first = 0; }
      }
    }
    setTimeout(d,tps);
  })();
}

// Fonction de défilement verticale
function defilImgVrt(el,srcs,pas,tps) {
  if(typeof el=="string") { el = document.getElementById(el); }
  var tps = tps || 50;
  var pas = pas || 1;
  var imgs = [];
  var offset = 0;
  for(var i=0,l=srcs.length;i<l;i++) {
    var img = new Image();
    img.src = srcs[i];
    imgs.push(img);
    img.style.width=el.offsetWidth+"px";
    img.style.position = "absolute";
    img.style.top = offset+"px";
    el.appendChild(img);
    offset += img.offsetHeight;
  }
  var first = 0;
  var last = imgs.length-1;

  (function d() {
    for(var i=0,l=imgs.length;i<l;i++) {
      var top = parseInt(imgs[i].style.top,10);
      imgs[i].style.top = (top-pas)+"px";
      if(i==first && (top-pas+imgs[i].offsetHeight)<0) {
        imgs[i].style.top = (parseInt(imgs[last].style.top,10)+imgs[last].offsetHeight-(i==0?pas:0))+"px";
        last = first++;
        if(first>imgs.length-1) { first = 0; }
      }
    }
    setTimeout(d,tps);
  })();
}
// Appel des deux fonctions de défilement au chargement de ma page .
window.onload=function() {
  defilImgVrt('bandeau_vertical',[
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg"
  
  ]);
  defilImgHrz('bandeau_horizontal',[
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg"
  ]);
};
</script>

 Dans cet exemple les valeur d’incrémentation de distance et de temps sont celles par défaut puisque je ne les ai pas spécifiées dans les paramètres de la fonction. Vous pouvez jouer sur la vitesse ou l’effet saccadé du défilement en modifiant leurs valeurs. (3ème et 4ème paramètre)

Code piqué sur un forum mais je ne retrouve plus le lien, désolée !

Code HTML :

<a href="#">
  <img src="img/image2.jpg" alt ="effet sur survol de l'image'/>
</a>

Code JQuery : Evénement sur le survol de toutes les  images associées à un lien

$('a img').hover(
   function(){ $(this).animate({ opacity : '.75' }); },
   function(){ $(this).animate({ opacity : '1' }); }
  );

L’idée est d’analyser la date courante afin de déterminer la saison en utilisant l’objet new Date(année, mois, jour)

<script>
  $(function() {
    var today = new Date();
    var ladate=Date.parse(today);
    var lannee = today.getFullYear();
    var dateprintemps  =Date.parse(new Date(lannee, 2, 21));
    var dateete        =Date.parse(new Date(lannee, 5, 21));
    var dateautomne    =Date.parse(new Date(lannee, 8, 21));
    var datehiver      =Date.parse(new Date(lannee, 11, 21));
    if(ladate>=dateprintemps && ladate<dateete){
      $("#monimage").css({backgroundImage: "url('img/Fond-Printemps.png')"}); }
    else if(ladate>=dateete && ladate<dateautomne){
      $("#monimage").css({backgroundImage: "url('img/Fond-Ete.png')"});  }
    else if(ladate>=dateautomne && ladate<datehiver){
      $("#monimage").css({backgroundImage: "url('img/Fond-Automne.png')"});  }
    else if(ladate>=datehiver || ladate<dateprintemps){
      $("#monimage").css({backgroundImage: "url('img/Fond-Hiver.png')"});  }
});
</script>