Cambiare la fonte dell'immagine usando jQuery

Puoi usare la funzione attr() di jQuery. Per esempio, se il tuo tag img ha un attributo id di 'my_image', dovresti fare questo:

Poi puoi cambiare il src della tua immagine con jQuery in questo modo:

$("#my_image").attr("src","second.jpg");

Per attaccare questo ad un evento click, potresti scrivere:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Per ruotare l'immagine, potresti fare così:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

Ti mostrerò come cambiare l'immagine src, in modo che quando clicchi su un'immagine ruota attraverso tutte le immagini che sono nel tuo HTML (nel tuo id d1 e nella classe c1 in particolare)... se hai 2 o più immagini nel tuo HTML.

Ti mostrerò anche come pulire la pagina dopo che il documento è pronto, in modo che inizialmente venga visualizzata una sola immagine.

Il codice completo

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

**La ripartizione.

1. Creare una copia dei link che contengono le immagini (nota: si potrebbe anche fare uso dell'attributo href dei link per una maggiore funzionalità... per esempio [visualizzare il link funzionante sotto ogni immagine][1]):

       var $immagini = $("#d1 > .c1 > a").clone(); ;

2. Controllate quante immagini erano presenti nell'HTML e create una variabile per tracciare quale immagine viene mostrata:

   var $length = $images.length;
   var $imgShow = 0;

3. Modificate l'HTML del documento in modo che venga mostrata solo la prima immagine. Cancella tutte le altre immagini.

   $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

4. Legare una funzione per gestire quando il link dell'immagine viene cliccato.

       $("#d1 > .c1 > a").click(function(event) {
           $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
           event.preventDefault();
       });

   Il cuore del codice di cui sopra sta usando ++$imgShow % $length per scorrere l'oggetto jQuery contenente le immagini. ++$imgShow % $length prima aumenta il nostro contatore di uno, poi modula quel numero con quante immagini ci sono. Questo manterrà l'indice risultante in bicicletta da 0 a length-1, che sono gli indici dell'oggetto $images. Ciò significa che questo codice funzionerà con 2, 3, 5, 10, o 100 immagini... ciclando attraverso ogni immagine in ordine e ripartendo dalla prima immagine quando si raggiunge l'ultima.

   Inoltre, .attr() è usato per ottenere e impostare l'attributo "src" delle immagini. Per prelevare elementi dall'oggetto $images, imposto $images come contesto jQuery usando la forma $(selector, context). Poi uso .eq() per scegliere solo l'elemento con l'indice specifico che mi interessa.

[jsFiddle esempio con 3 immagini][5]

br/> Puoi anche memorizzare le src in un array.
[esempio jsFiddle con 3 immagini][6]

Ed ecco come incorporare gli href dai tag di ancoraggio intorno alle immagini:
[esempio jsFiddle][7]

Potete anche farlo con jQuery in questo modo:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

Puoi avere una condizione se ci sono più stati per la fonte dell'immagine.