Simpelt slideshow med CSS3 og jQuery
Skrevet af: Redaktionen 04-11-2012 Skrevet i: CSS og CSS3, HTML + HTML5, JQuery
I dette indlæg vil jeg dele en super simpel måde at lave et slideshow på. Alt hvad du skal bruge er et lille stykke html kode, lidt CSS og så en yderst simpel jQuery funktion. Slideshowet er med auto-play funktionalitet, hvilket
Først og fremmest skal du bruge følgende stykke html kode:
<div id="slideshow"> <div><img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" /></div> <div><img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg" alt="" /></div> <div>Meget cool ikke? Du kan selv skifte billederne ud eller tilføje flere!</div> </div>
Herefter skal du tilføje nedenstånde i dit CSS sheet. Der bruges en smule CSS3 til skyggen og ellers har vi stylet den således at den placeres midt på siden. Du kan selvfølgelig selv rette den til.
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
Og her til sidst kommer jQuery koden – Den der får al magien til at ske. Du kan placere denne kode lige inden </head> og så skulle det gerne virke:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
Og så skulle alt gerne virke! Du kan se en live demo her: Demo
Hejsa og mange tak for tilgængeligheden af koden , jeg har desværre tre udfordringer
1) jeg har ikke kodet i CCS , men i PHP og der hvor jeg indsætter CSS koden vises kodning teksten online ?
2) hvor skriver man den ønsket størrelse på format billederne skal vises i , dit link viser små søde billeder mit viser stor billeder og for stor billeder ?
3) min scool håber også i forbindelse med diashowet
Hej Claus,
Svar på spørgsmål:
1. Husker du at indsætte din css inline korrekt? Se evt. her: https://www.nemprogrammering.dk/Tutorials/CSS/V2/2-style-sheets.php
2. Billederne vises i det format/størrelse ud uploader dem i. Du skal altså lave dine billeder mindre i f.eks. Photoshop, hvis de skal gøre mindre. Alternativt skal du sætte en width og height på dine img tags.
3. Er ikke helt sikker på hvad du mener?
Hej igen
der er ikke problemer billederne vises i deres rigtige størrelse selv om jeg ikke retter
“width: 240px;
height: 240px;”
mvh. Tom
Hej
tak for en god hjemmeside, der giver god inspiration og læring. Jeg har et spørgsmål, er det muligt at lave et slideshow med både portrait og landskape i samme show, evt. med class? eller skal der mere javascript til?
mange hilsner og godt nytår
Tom
Jeg forstår ikke hvor jQuery koden skal placeres? Foran ? Hvor er det? :-)
mvh Lina
Hej Lina,
indhold tag. Det er lige inden tagget, at du skal indsætte jQuery koden.I dit html dokument har du et
Mvh.
Tak Thomas!
Har længe ventet på det. Ved endelig ikke hvorfor jeg ikke har skrevet på forummet?
//Alexander