Hvordan lage er elegant slideshow?

Utvikling og design Webutvikling
1

Hei,

Jeg skal lage et slideshow som skal erstatte gif animasjons løsning. Gif funker dessverre ikke på alle android tlf, og det er jo litt teit. Jeg har funnet en kode for slideshow, men denne har litt dårlige overganger også funker den ikke på noen mobile enheter. Noen som har bedre forslag?

Det må vise kun bilde, ikke noe utenforliggende bokser eller youtube løsninger.

Dette er koden jeg har:

 

Aina:)

2

noen spesiell grunn til at du ikke bruker f.ex. jquery cycle?

Hvis du ikke kjenner til det er det et ekstremt enkelt og greit slideshow som kan vise … tja, omtrent alt mellom himmel og jord såvidt jeg vet, og med masse konfigurasjonsmuligheter for å tilpasse ting

3

Er ikke noe kjent med dette, men det skal jeg ta en titt på.

4

det finnes haugevis av liknende løsninger, bare søk etter jquery slideshow, så finner du masse

5

Oida, “javascript 1.1” å greier! Den koden er nok ikke fra i går, men det ser ut som det du prøver å gjøre er rimelig rett frem, bare bytte mellom noen bilder?

Prøv noe sånt i stedet:

[HTML]

$(function() { var delay = 2500, images = $("img", "#slideshow"), index = 0; $(images[0]).fadeIn(300); slide(); 
        function slide() {
            index = images.length-2<index ? 0 : index+1;
            $("img:visible", "#slideshow").fadeOut(delay)
            $(images[index]).fadeIn(delay, function() {slide();});
        }
    });
</script>
<style type="text/css">
      #slideshow img {position: absolute; top: 0; left:0; display:none;}
</style>
​[/HTML]

SLIDESHOW DEMONSTRASJON

1 Like
6

Hehe, nei jeg kan jo ikke dette her i det hele tatt, så må bare kopiere det jeg finner:) Takk for tips!

7

Vet dette er en forferdelig bump men har spørsmål angående denne.
Om jeg vil at bildene skal bruke lengre tid på å skrifte. La oss si 7 sekunder før den skifter til neste bilde. Og om jeg vil ha inn fler bilder. Hva må jeg forandre da?

8

Har oppdatert den litt slik at den kanskje er litt enklere å bruke, var mest ment som et raskt eksempel.

[HTML]

$(function() { var options = {fade: 800, // tid bildene bruker på å fade inn/ut delay: 7000, // ventetid mellom bildebytte - 7 sekunder height: 400, // slideshow høyde width: 500, // slideshow bredde images: "#slideshow", // element hvor bildene ligger index: 0 // intern for å holde litt orden }; 
        (function slide(o) {
            var elems = $('img', o.images).css({height: o.height, width: o.width});
              o.index = elems.length - 2 < o.index ? 0 : o.index + 1;
    
            $("img:visible", "#slideshow").fadeOut(o.fade);
            $(elems).eq(o.index).fadeIn(o.fade, function() {
                setTimeout(function() {slide(o);}, o.delay);
            });
        })(options);
    });
</script>
<style type="text/css">
    #slideshow img {position: absolute; top: 0; left:0; display:none;}
</style>
​[/HTML]

FIDDLE
​

1 Like