2012-04-02 3 views
0

Ich habe dieses Skript, das eine Liste der Daumen erlaubt zu drehen, wenn Sie die Maus über das Bild bewegen (was übrigens sehr cool!)Kommen wir zurück zum ersten Bild, wenn Maus über das Entfernen

Sie den Code überprüfen hier über und mit ihm spielen, um:

http://jsfiddle.net/vfpK4/36/

ich möchte eigentlich die Bilder dem ersten Bild zurück zu bekommen wenn ich die Maus weg bewegen, aber ich bin wirklich nicht so vertraut mit jQuery, gibt es Wer kann den Code ein wenig anpassen? (wahrscheinlich sehr einfach, aber immer noch zu schwer für mich)

Antwort

1

Gefällt mir: jsFiddle example.

Sie können einfach eine Variable festlegen, um die ursprüngliche Bildquelle zu speichern und sie dann bei Mouseout an das Bild zurückzuspeisen.

jQuery:

var intervalId; 
var first = $('img').attr('src'); 
$('img').hover(function() { 
    var $img = $(this), 
     imageList = $img.attr('class').split('@'); 
    // start the rotation 
    intervalId = window.setInterval(function() { 
     // cycle array 
     imageList.unshift(imageList.pop()); 
     $img.attr('src', imageList[0]); 
    }, 500); 
}, function() { 
    // stop the cycle 
    intervalId = window.clearInterval(intervalId); 
    $('img').attr('src', first); 
}); 
+0

Cool! Das hat wie ein Zauber funktioniert, danke! – Gerben

+0

j08691, kann dieses Skript angepasst werden: wenn die Maus über ein div mit class = "list-item" schwebt, sollte das Bild mit class = "thumb" rotieren? – Gerben

+1

Wie folgt: http://jsfiddle.net/j08691/vfpK4/43/? – j08691