mayer10mail
Grünschnabel
Hallo,
habe mir eine ganz simple Slideshow mit Hilfe des Internets zusammen gebaut, die soweit auch funktioniert, nur wenn ich das ganze mit einer Art "Content Tab" ausblende, kommt die slideshow völlig durcheinander! Aber ich habe keine Ahnung woran das liegt...ich denke mal, das das Ausblenden der Slideshow diesen Fehler verursacht.
Vielleicht hat ja jemand eine Idee, wie ich das Problem lösen könnte...
Gruß
habe mir eine ganz simple Slideshow mit Hilfe des Internets zusammen gebaut, die soweit auch funktioniert, nur wenn ich das ganze mit einer Art "Content Tab" ausblende, kommt die slideshow völlig durcheinander! Aber ich habe keine Ahnung woran das liegt...ich denke mal, das das Ausblenden der Slideshow diesen Fehler verursacht.
Vielleicht hat ja jemand eine Idee, wie ich das Problem lösen könnte...
Gruß
Code:
<html><head><title>JS</title>
<style type="text/css">
#div01
{
position:absolute;
left:50px;
top:50px;
width:300px;
height:350px;
background-color:#808080;
display: block;
}
#div02
{
position:absolute;
left:400px;
top:50px;
width:300px;
height:350px;
background-color:green;
display: block;
}
#slideshow1 {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow1 > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow2 {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow2 > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow1 > div:gt(0)").hide();
setInterval(function() {
$('#slideshow1 > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow1');
}, 3000);
});
$(function() {
$("#slideshow2 > div:gt(0)").hide();
setInterval(function() {
$('#slideshow2 > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow2');
}, 3000);
});
function divchange (angabe)
{
document.getElementById('div01').style.display = 'none';
document.getElementById('div02').style.display = 'none';
document.getElementById(angabe).style.display = 'block';
}
</script>
</head>
<body>
<a href="javascript:divchange('div01');">div 1 einblenden</a> | <a href="javascript:divchange('div02');">div 2 einblenden</a>
<div id="div01">
<div id="slideshow1">
<div>
<img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
</div>
<div id="div02">
<div id="slideshow2">
<div>
<img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
</div>
</body>
</html>
