fråga jquery & css
Jag har byggt ett "bildspel" som "slidar" bilder (eller divar) med jquery med koden nedan.
Det problem jag har kvar är att jag vill släcka allt utanför diven med bordern. Hur gör man det?
Tacksam för hjälp!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Erics jq-test</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var pos = 1;
$(document).ready(function(){
console.log("possition: " + pos);
var slides = $('#container .element');
var numberOfSlides = slides.length;
console.log("antal slides: " + numberOfSlides);
$('#right').click(function(){
if(pos<=numberOfSlides-1){
//$('#container div.element').animate({"left" : '+=200px' }, 1000, function() {pos++;});
$('#container div.element').animate({"left" : '+=200px' }, 1000 );
pos++;
console.log("possition: " + pos);
}
else{
$('#container div.element').animate({"left" : '-=400px' }, 1000);
pos=1;
console.log("possition: " + pos);
}
});
$('#left').click(function(){
if(pos>1){
$('#container div.element').animate({"left" : '-=200px' }, 1000);
pos--;
console.log("possition: " + pos);
}
else {
$('#container div.element').animate({"left" : '+=400px' }, 1000);
pos=3;
console.log("possition: " + pos);
}
});
});
</script>
<style type="text/css">
body {margin:20px 0 0 400px}
#container { width:200px; height:200px;; border: 5px black solid; position:relative}
#container div {width:200px; height:200px; position: absolute; display: block;}
#container #element1 { background-color:red; left:-400px}
#container #element2 { background-color:green; left:-200px}
#container #element3 { background-color:blue; left:0px}
.slideLink {text-decoration:none; font-size:36px}
</style>
</head>
<body>
<div id="container">
<div id="element1" class="element">3</div>
<div id="element2" class="element">2</div>
<div id="element3" class="element">1</div>
</div>
<br />
<a href="#" id="left" class="slideLink"><</a>
<a href="#" id="right" class="slideLink">></a>
</body>
</html>
