Hi!
Ich hoffe ihr könnt mir helfen!
Ich arbeite an einem Slider, da es noch keinen passenden im Web gibt. Nivo-Slider kann nur Bilder hin und herschieben und der AnythingSlider passt auch nicht...
Da ich mich aber nicht so wirklich gut in JavaScript auskenne gibt es schon Probleme. Hier ist mein Testfile (oben und unten fehlt was, ich weiß...):
Leider hängt sich da aber der Browser auf. Darf man while(1) vielleicht nicht schreiben? Bzw. wie kann man dann eine Endlosschleife realisieren?
Das File ist außerdem zu finden unter: http://nicoeinsidler.bplaced.com/p/test-slider/.
Hoffe es kann mir wer helfen und meine Frage ist nicht zu blöd...
lg
nico
EDIT: Weil ich gesehen hab, dass der Code so unschön abgebildet wird:
Click for large view - Uploaded with Skitch
Ich hoffe ihr könnt mir helfen!
Ich arbeite an einem Slider, da es noch keinen passenden im Web gibt. Nivo-Slider kann nur Bilder hin und herschieben und der AnythingSlider passt auch nicht...
Da ich mich aber nicht so wirklich gut in JavaScript auskenne gibt es schon Probleme. Hier ist mein Testfile (oben und unten fehlt was, ich weiß...):
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#slider div').hide(); // reset all slides
var n = $("#slider div").length; // counting how many slides there are
var zufall=Math.floor((Math.random()*n) + 1); // creating a random number
var nextslide = showSpecific(zufall); // showing the first random slide
animation(nextslide,n); // starting the animation
});
function animation(start,slides) {
var i = start; // variable for counting (slide 1, slide 2, ...)
while(1) {
setTimeout("showSpecific(i)",2000); // waiting 2 seconds then --> showSpecific()
if(i==slides) { // if last slide -->
i = 1; // back to beginning
} else {
i++; // next slide number
}
}
}
function showSpecific(slide) {
$('#slider>ul>li').removeClass('active'); // reset all classes
$('#slider div').fadeOut(); // reset all slides
$('#slider div:nth-child('+slide+')').fadeIn('slow'); // show right slide
// $('#slider div:nth-child('+slide+')').addClass('active'); // append class="active" to div
$('#slider>ul>li:nth-child('+slide+')').addClass('active'); // -,- to li
var x = slide + 1; // variable for the next slide
return x; // return this value for later use
}
</script>
</head>
<body>
<div id="box">
<div id="slider">
<div>
<h3>First Test Slide</h3>
<p>
Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida.
</p>
</div>
<div>
<img src="picture.png">
</div>
<div>
<ul>
<li>In condimentum orci id</li>
<li>Vivamus id mollis quam. Morbi ac commodo nulla. In</li>
<li>Phasellus molestie magna non est bibendum non</li>
<li>Nunc eu ullamcorper orci. Quisque</li>
<li>Quisque lacus quam, egestas ac tincidunt a, lacinia vel</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
<li>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris</li>
</ul>
</div>
<!--><div>
<iframe width="400" height="200" src="http://www.youtube.com/embed/L9szn1QQfas?rel=0" frameborder="0" allowfullscreen></iframe>
</div>-->
<ul>
<li><a href="javascript:showSpecific(1)">1</a></li>
<li><a href="javascript:showSpecific(2)">2</a></li>
<li><a href="javascript:showSpecific(3)">3</a></li>
<!--<li><a href="javascript:showSpecific(4)">4</a></li>-->
</ul>
</div>
</div>Leider hängt sich da aber der Browser auf. Darf man while(1) vielleicht nicht schreiben? Bzw. wie kann man dann eine Endlosschleife realisieren?
Das File ist außerdem zu finden unter: http://nicoeinsidler.bplaced.com/p/test-slider/.
Hoffe es kann mir wer helfen und meine Frage ist nicht zu blöd...
lg
nico
EDIT: Weil ich gesehen hab, dass der Code so unschön abgebildet wird:
Click for large view - Uploaded with Skitch
okay, jetzt ham wers doppelt