εναλλαγη bg image me JS

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
starfish
Δημοσιεύσεις: 600
Εγγραφή: 15 Δεκ 2006 12:58

εναλλαγη bg image me JS

Δημοσίευση από starfish » 10 Ιουν 2010 18:31

Λοιπόν με Js είμαι εντελώς άσχετος οπότε όποια βοήθεια θα ήτανε πολύ χρήσιμη.

Εχω ένα div στο οποίο μέσω id εχω βάλει μια εικόνα bg.

Μεσα στο div βεβαια υπάρχουν ακόμα περισσότερα div με διάφορα πράγματα.

Πρέπει τώρα η background εικόνα να εναλλάσεται, με κάποιο αργο ρυθμό και ίσως κάποιο απλό εφέ.

Καμμιά ιδέα εάν γίνεται και πως;

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

εναλλαγη bg image me JS

Δημοσίευση από burnmind » 10 Ιουν 2010 19:32

Έπεσες πάνω στη στιγμή που προσπαθούσα να σκεφτώ θέμα για κανένα μικρό tutorial, οπότε πάρε (χρειάζεται jQuery):

Κώδικας: Επιλογή όλων

var index = 1;
var images = new Array ('test1.png', 'test2.png', 'test3.png');


function loadImage()
{
  $('#myImage').fadeOut('fast', function() 
  {
    $(this).attr('src', images[index]);
    
    $(this).fadeIn('fast', function() 
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
} 

$(document).ready(function()
{
  setInterval ( 'loadImage()', 3000 );
});

Κώδικας: Επιλογή όλων

<div>whatever <img src="test1.png" id="myImage" alt="whatever" /> whatever</div>
Τελευταία επεξεργασία από το μέλος burnmind την 10 Ιουν 2010 19:39, έχει επεξεργασθεί 1 φορά συνολικά.

starfish
Δημοσιεύσεις: 600
Εγγραφή: 15 Δεκ 2006 12:58

εναλλαγη bg image me JS

Δημοσίευση από starfish » 10 Ιουν 2010 19:37

Σε ευχαριστώ πολυ αλλά η εικόνα όπως γράφω είναι background απο Css όχι μέσα στο div. Μέσα στο div έχει περιεχόμενο.

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

εναλλαγη bg image me JS

Δημοσίευση από burnmind » 10 Ιουν 2010 19:39

starfish έγραψε:Σε ευχαριστώ πολυ αλλά η εικόνα όπως γράφω είναι background απο Css όχι μέσα στο div. Μέσα στο div έχει περιεχόμενο.
Ε, ψάξε και μόνος σου λίγο! :wink:

tip: http://api.jquery.com/css/

starfish
Δημοσιεύσεις: 600
Εγγραφή: 15 Δεκ 2006 12:58

εναλλαγη bg image me JS

Δημοσίευση από starfish » 10 Ιουν 2010 19:45

Ψάχνω, άλλα όπως είπα ήδη δεν γνωρίζω επι του θέματος. Thanks και πάλι

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

εναλλαγη bg image me JS

Δημοσίευση από burnmind » 10 Ιουν 2010 19:54

starfish έγραψε:Ψάχνω, άλλα όπως είπα ήδη δεν γνωρίζω επι του θέματος. Thanks και πάλι
Ευκαιρία να μάθεις λοιπόν! :) Έχεις ό,τι χρειάζεσαι στο παράδειγμα που σου έδωσα μαζί με το "tip" του προηγούμενου μηνύματός μου. Αντί να αλλάζεις το src του img, θα αλλάζεις το background του div που θέλεις.

Προσπάθησε και αν δεν τα καταφέρεις ξαναρώτα.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

εναλλαγη bg image me JS

Δημοσίευση από dimsis » 10 Ιουν 2010 20:03


starfish
Δημοσιεύσεις: 600
Εγγραφή: 15 Δεκ 2006 12:58

εναλλαγη bg image me JS

Δημοσίευση από starfish » 10 Ιουν 2010 20:03

ναι burNMind αυτο που μου έστειλες αλλάζει διαφορα attr αλλά με κάποιο trigger. Δεν θέλω αυτό. Θέλω απλά να παίζουνε οι εικονες στο background. Σαν να ειναι flash. Να αλλάζει η εικονα πχ ανά 10sec με κάποιο εφέ.
Τελευταία επεξεργασία από το μέλος starfish την 10 Ιουν 2010 20:05, έχει επεξεργασθεί 1 φορά συνολικά.

starfish
Δημοσιεύσεις: 600
Εγγραφή: 15 Δεκ 2006 12:58

εναλλαγη bg image me JS

Δημοσίευση από starfish » 10 Ιουν 2010 20:04

thanks dimsis

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

εναλλαγη bg image me JS

Δημοσίευση από burnmind » 10 Ιουν 2010 20:34

starfish έγραψε:ναι burNMind αυτο που μου έστειλες αλλάζει διαφορα attr αλλά με κάποιο trigger. Δεν θέλω αυτό. Θέλω απλά να παίζουνε οι εικονες στο background. Σαν να ειναι flash. Να αλλάζει η εικονα πχ ανά 10sec με κάποιο εφέ.
Προφανώς δεν έκανες τον κόπο να το δοκιμάσεις, ούτε να διαβάσεις τον κώδικα..

Για την ιστορία, αλλάζει αυτόματα την εικόνα ανά 3 δευτερόλεπτα με fade out & fade in.. Ούτε triggers, ούτε τίποτα.. Αυτό που ζήτησες δηλαδή (να αλλάζει μία εικόνα αυτόματα με κάποιο εφέ), με τη διαφορά του ότι δεν αλλάζει το background, αλλά ένα img tag (δεν πρόσεξα ότι ζητούσες background)..

Anyway, αφού βρήκες την άκρη καλώς :wink:

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

εναλλαγη bg image me JS

Δημοσίευση από Basilakis » 14 Ιουν 2010 10:37

Και πάντα μπορείς να χρησιμοποιήσεις την z-index και να βάλεις ένα div απο πάνω... ;)

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης