smsterminal
Mitglied
hi Leute, habe eine slidebox (Siehe code). Im Screen ist sie absolut in der Mitte festgesetzt. wie bekomme ich die komplette box nach links???
Code:
<!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>Slidebox</title>
<style type="text/css">
<!--
body {margin:0; padding:0; background:#fff;}
#slidebox{position:relative; border:1px solid #ccc; margin:40px auto;}
#slidebox, #slidebox .content{width:600px;}
#slidebox, #slidebox .container, #slidebox .content{height:300px;}
#slidebox{overflow:hidden;}
#slidebox .container{position:relative; left:0;}
#slidebox .content{background:#eee; float:left;}
#slidebox .content div{padding:15px 28px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:21px; height:21px;}
#slidebox .next{right:0; margin-right:2px; background:url(slidebox_next.png) no-repeat left top;}
#slidebox .next:hover{background:url(slidebox_next_hover.png) no-repeat left top;}
#slidebox .previous{margin-left:2px; background:url(slidebox_previous.png) no-repeat left top;}
#slidebox .previous:hover{background:url(slidebox_previous_hover.png) no-repeat left top;}
#slidebox .thumbs{position:absolute; z-index:2; bottom:10px; right:10px;}
#slidebox .thumbs .thumb{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px; background:url(slidebox_thumb.png); color:#fff;}
#slidebox .thumbs a.thumb:hover{background:#fff; color:#000;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var autoPlayTime=7000;
autoPlayTimer = setInterval( autoPlay, autoPlayTime);
function autoPlay(){
Slidebox('next');
}
$('#slidebox .next').click(function () {
Slidebox('next','stop');
});
$('#slidebox .previous').click(function () {
Slidebox('previous','stop');
});
var yPosition=$('#slidebox').height()/2-$('#slidebox .next').height()/2;
$('#slidebox .next').css('top',yPosition);
$('#slidebox .previous').css('top',yPosition);
});
//slide page to id
function Slidebox(slideTo,autoPlay){
var animSpeed=1000; //animation speed
var easeType='easeInOutExpo'; //easing type
var sliderWidth=$('#slidebox').width();
var leftPosition=$('#slidebox .container').css("left").replace("px", "");
$("#slidebox .content").each(function (i) {
totalContent=i*sliderWidth;
$('#slidebox .container').css("width",totalContent+sliderWidth);
});
if( !$("#slidebox .container").is(":animated")){
if(slideTo=='next'){ //next
if(autoPlay=='stop'){
clearInterval(autoPlayTimer);
}
if(leftPosition==-totalContent){
$('#slidebox .container').animate({left: 0}, animSpeed, easeType); //reset
} else {
$('#slidebox .container').animate({left: '-='+sliderWidth}, animSpeed, easeType); //next
}
} else if(slideTo=='previous'){ //previous
if(autoPlay=='stop'){
clearInterval(autoPlayTimer);
}
if(leftPosition=='0'){
$('#slidebox .container').animate({left: '-'+totalContent}, animSpeed, easeType); //reset
} else {
$('#slidebox .container').animate({left: '+='+sliderWidth}, animSpeed, easeType); //previous
}
} else {
var slide2=(slideTo-1)*sliderWidth;
if(leftPosition!=-slide2){
clearInterval(autoPlayTimer);
$('#slidebox .container').animate({left: -slide2}, animSpeed, easeType); //go to number
}
}
}
}
</script>
</head>
<body>
<div id="slidebox">
<div class="next"></div>
<div class="previous"></div>
<div class="thumbs">
<a href="#" onClick="Slidebox('1');return false" class="thumb">1</a>
<a href="#" onClick="Slidebox('2');return false" class="thumb">2</a>
<a href="#" onClick="Slidebox('3');return false" class="thumb">3</a>
<a href="#" onClick="Slidebox('4');return false" class="thumb">4</a>
</div>
<div class="container">
<div class="content">
<div>content 1</div>
</div>
<div class="content">
<div>content 2</div>
</div>
<div class="content">
<div>content 3</div>
</div>
<div class="content">
<div>content 4</div>
</div>
</div>
</div>
</body>
</html>