Slider

Dieser Code schiebt Bilder von rechts nach links in Position.

 

<!doctype html>
<html>
<head>
<style>

@-webkit-keyframes move {
0% {left:1000px;}
100% {left:0px;}
}

@-o-keyframes move {
0% {left:1000px;}
100% {left:0px;}
}

@-moz-keyframes move {
0% {left:1000px;}
100% {left:0px;}
}

@keyframes move {
0% {left:1000px;}
100% {left:0px;}
}
#bilder img
{
position: absolute;
left:0px;
top:0px;
}

.move
{
-webkit-animation: move 3s;
-moz-animation: move 3s;

-o-animation: move 3s;
animation: move 3s;
}

#bilderrahmen
{
position: relative;
width:1000px;
height:400px;
overflow: hidden;
margin:20px auto;
}
</style>
</head>
<body>

<div id="bilderrahmen">
<div id="bilder">
<img id="b0" src="/tutorials/joomla/Dash1.png">
<img id="b1" src="/tutorials/joomla/Dash2.png">
<img id="b2" src="/tutorials/joomla/Dash3.png">
<img id="b3" src="/tutorials/joomla/Dash4.png">
</div>
</div>
<div id="ausgabe"></div>
<script>
var m=0;
var bilder=3;
function wechseln()
{
var n;
for(var i=0;i<=bilder;i++)
{
n="b"+i;
document.getElementById(n).style.zIndex-=1;
document.getElementById(n).className="";
}


var id="b"+m;
document.getElementById(id).style.zIndex=20;
document.getElementById(id).className="move";

m++;
if (m>bilder) {
m=0;
}
setTimeout("wechseln()",3000);
}
wechseln();

</script>

</body>
</html>

Online

Aktuell sind 12 Gäste und keine Mitglieder online