Ikoster
Gebruiker
- Lid geworden
- 19 okt 2009
- Berichten
- 144
hoi:thumb:,
ik heb weer eens een vraag,
ik heb een leuke TUT gevonden over hoe je een content slider kunt maken!
het maakt gebruik van html CSS en javascript(jquery).
hier is de code:
hij werkt perfect, maar in ie 7en 6 werkt overflow niet en word het gewoon helverwege de pagina geplaats!
ik heb een hier bij geschreven:
http://www.ikoster.nl
helemaal onderaan
verder doet hij het in ie 8 goed.
wat moet ik doen dat het wel werkt?
ik heb weer eens een vraag,
ik heb een leuke TUT gevonden over hoe je een content slider kunt maken!
het maakt gebruik van html CSS en javascript(jquery).
hier is de code:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tutorial for Content Slider - STYLE Code</title>
<style type="text/css">
#wiz { border: 1px solid blue; height: 300px; width: 460px; overflow: hidden; }
#wiz ul { position: relative; width: 36800px; padding: 0px; }
#wiz ul li { height: 300px; width: 460px; list-style: none; float: left; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function slidePrev(){
if(parseInt($("#wiz ul").css("left")) < 0)
{
$("#wiz ul").animate({
left: parseInt($("#wiz ul").css("left"))+460+"px"
},1000);
}
}
function slideNext(){
if(parseInt($("#wiz ul").css("left")) > -3220)
{
$("#wiz ul").animate({
left: parseInt($("#wiz ul").css("left"))-460+"px"
},1000);
}
}
function slideFirst(){
$("#wiz ul").animate({ left: "0px" },1000);
}
function slideLast(){
$("#wiz ul").animate({ left: "-3220px" },1000);
}
function slideTo(x){
$("#wiz ul").animate({
left: "-"+(460*x)+"px"
},1000);
}
</script>
</head>
<body>
<div id="wiz">
<ul>
<li><button onclick="slideTo(1)">Next</button></li>
<li><button onclick="slidePrev()">Previous <img src="side.png" border="0" /></button><button onclick="slideNext()">Next</button></li>
<li>Content for 3rd li element.</li>
<li>Content for 4th li element.</li>
<li>Content for 5th li element.</li>
<li>Content for 6th li element.</li>
<li>Content for 7th li element.</li>
<li>laatste</li>
</ul>
</div>
<button onclick="slideFirst()">First</button>
<button onclick="slidePrev()">Previous</button>
<button onclick="slideNext()">Next</button>
<button onclick="slideLast()">Last</button>
<a href="#" onclick="slideTo(1)">Slide to 2th element</a>
<a href="#" onclick="slideTo(3)">Slide to 4th element</a>
<a href="#" onclick="slideTo(5)">Slide to 6th element</a>
</body>
</html>ik heb een hier bij geschreven:
http://www.ikoster.nl
helemaal onderaan
verder doet hij het in ie 8 goed.
wat moet ik doen dat het wel werkt?
Laatst bewerkt:
