diedVIPs

html knowhow

Bildergallery roliert










Bildergallery roliert

So sieht´s aus




Quellcode
<html>
<head>
<script>document.addEventListener('DOMContentLoaded', function () {
// Auswahl des Bildwechslers und seiner Kindelemente
var changer = document.querySelector('#gallery'),
children = changer.querySelectorAll('figure'),
container = document.querySelector('#container'),
newWidth = (children.length * 100) + '%';
// sets container, puts figure-elements horizontal
container.classList.add('container');
changer.classList.add('changer');
changer.style.width = newWidth;
var newMargin = ((children.length - 1) * -16) + '%';
// animate changer
var marquee = changer.animate(
[
{
marginLeft: '110%'
}, {
marginLeft: newMargin
}
], {
duration: children.length * 1500,
direction: 'alternate',
iterations: Infinity
});
// now for the playing/pausing
changer.addEventListener('mouseenter', pauseMarquee, false);
changer.addEventListener('mouseleave', playMarquee, false);
// pretty self-explanatory
function playMarquee() {
if (marquee.playState === 'paused') marquee.play();
}
// pretty self-explanatory
function pauseMarquee() {
if (marquee.playState === 'running') marquee.pause();
}
});
</script>


<style type="text/css">
#gallery {}
#gallery figure {position: relative;width: 10em;margin: 0;padding: 0;}
#gallery figcaption {position: absolute;left: 0em;top: 12em;font-size:1.3em;color: black;}
#gallery img {width: 100%;margin: 0;padding: 0;}
.changer {position: relative;display:flex; align-items: -1em;justify-content: -1em;width: 100%;}
.changer figure {display: block;width: 0em;}
</style>
<head>

<body >
<div id="container"><div id="gallery">
<figure><a target="_self" href="#"><img src="Bilder/W-HBart.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-Hdil.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-htmlKN.png" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-Likeur.jpg" alt="Peru 2007" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-MSG.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-MSGS.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-Ovoice.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-ReuFi.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
</div></div>
</body>

</html>







Kontakt    Datenschutz    Impressum