Jquery carousel
Deze carousel doet het niet en ik weet niet waarom kunnen jullie me helpen
Bedankt
mijn code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Carousels 1</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<link href="styles.css" rev="stylesheet" rel="stylesheet">
</head>
<body>
<ul id="carousel">
<li><img src="images/image1.PNG" alt="image 1" border="0"></li>
<li><img src="images/image2.PNG" alt="image 2" border="0"></li>
<li><img src="images/image3.PNG" alt="image 3" border="0"></li>
<li><img src="images/image4.PNG" alt="image 4" border="0"></li>
<li><img src="images/image5.PNG" alt="image 5" border="0"></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel ul').each(function() {
var t = setInterval(function() {
$('#carousel ul').animate({marginLeft:-100}, 1000, function() {
$(this).find('li:last').after($(this).find('li:first'));
$(this).css({marginLeft:0});
});
}, 5000);
});
});
</script>
</body>
</html>
<html>
<head>
<title>Carousels 1</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<link href="styles.css" rev="stylesheet" rel="stylesheet">
</head>
<body>
<ul id="carousel">
<li><img src="images/image1.PNG" alt="image 1" border="0"></li>
<li><img src="images/image2.PNG" alt="image 2" border="0"></li>
<li><img src="images/image3.PNG" alt="image 3" border="0"></li>
<li><img src="images/image4.PNG" alt="image 4" border="0"></li>
<li><img src="images/image5.PNG" alt="image 5" border="0"></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel ul').each(function() {
var t = setInterval(function() {
$('#carousel ul').animate({marginLeft:-100}, 1000, function() {
$(this).find('li:last').after($(this).find('li:first'));
$(this).css({marginLeft:0});
});
}, 5000);
});
});
</script>
</body>
</html>
Gewijzigd op 03/12/2010 17:06:43 door Kut Piemel
Gesponsorde koppelingen:
Je kunt overigens ook je HTML wijzigen zodat #carousel wel een child element ul heeft:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="carousel">
<ul>
<li><img src="images/image1.PNG" alt="image 1" border="0"></li>
<li><img src="images/image2.PNG" alt="image 2" border="0"></li>
<li><img src="images/image3.PNG" alt="image 3" border="0"></li>
<li><img src="images/image4.PNG" alt="image 4" border="0"></li>
<li><img src="images/image5.PNG" alt="image 5" border="0"></li>
</ul>
</div>
<ul>
<li><img src="images/image1.PNG" alt="image 1" border="0"></li>
<li><img src="images/image2.PNG" alt="image 2" border="0"></li>
<li><img src="images/image3.PNG" alt="image 3" border="0"></li>
<li><img src="images/image4.PNG" alt="image 4" border="0"></li>
<li><img src="images/image5.PNG" alt="image 5" border="0"></li>
</ul>
</div>
Gewijzigd op 04/12/2010 09:09:33 door Lauren Zonneveld
Niek s op 04/12/2010 14:11:23:
of gewoon alleen #carousel
Goh daar heb ik veel aan
Gnotrgnotr gnotrgnotr op 04/12/2010 21:38:09:
Goh daar heb ik veel aan
Niek s op 04/12/2010 14:11:23:
of gewoon alleen #carousel
Goh daar heb ik veel aan
Ja, want dat is beter dan een extra div om de ul heen zetten puur om de selector werkend te krijgen. Workaround dus. '#carousel' zou ik ook gebruiken.
The Force op 05/12/2010 01:14:21:
Ja, want dat is beter dan een extra div om de ul heen zetten puur om de selector werkend te krijgen. Workaround dus. '#carousel' zou ik ook gebruiken.
Gnotrgnotr gnotrgnotr op 04/12/2010 21:38:09:
Goh daar heb ik veel aan
Niek s op 04/12/2010 14:11:23:
of gewoon alleen #carousel
Goh daar heb ik veel aan
Ja, want dat is beter dan een extra div om de ul heen zetten puur om de selector werkend te krijgen. Workaround dus. '#carousel' zou ik ook gebruiken.
Sorry
Dit gebeurt alleen de eerste maal. Daarna corrigeert het script dit keurig.
2. Is het mogelijk om, i.c.m. een 'style switcher' de waarden voor marginTop e.d. in percentages op te geven?
Ik ben zelf een absolute beginner met jQuery, vandaar deze vraag.
@Kees Hennen: Kan je iets tonen (code/voorbeeld)?
Waarschijnlijk is dit enkel een css probleem.
#carousel{
overflow:hidden;
width:100%;
height:100px;
margin:auto;
padding:auto;
background-color:#CCC;
margin-bottom:2em;
}
Het HTML deel:
<div id="carousel">
<ul>
<li><img src="_images/sponsors/abrahams.png" width="90%" /></li>
<li><img src="_images/sponsors/abrahams2.png" width="90%" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel ul').each(function()
// Stel de interval op 10 seconden
var t = setInterval(function() {
$('#carousel ul').animate({marginTop:-100}, 1000, function() {
//Deze code werkt als de anitatie klaar is.
$(this).find('li:last').after($(this).find('li:first'));
// Reset de marge nadat het laatste item achteraangezet is.
$(this).css({marginTop:0});
});
}, 5000);
});
});
</script>
</div>
