olampiad
چهارشنبه 09 مهر 1393, 18:10 عصر
سلام و خسته نباشید به اساتید عزیز
به این کد های من ی نگا بندازید.
میشه این رو یکبار روی سیستم خودتون اجرا کنید.
بعد از اجرا کردن کد روی دکمه next کلیک کنید.
میبینید که دایو های نارنجی که درون آن ها شماره نوشتم حرکت میکنه.
ولی
مشکل اینجاست که این حرکت ثابت هستش:
یعنی هر بار از zero شروع کرده و در nine ایست میکند.
من میخوام کاری کنم که این جوری نشه و به ترتیب بره جلوتر.
مثلا اگه آخرین دایوی که در سمت راست نشون میده nine باشد بع از زدن next آخرین دایوی که نشان داده میشود twelv باشد و به ترتیب به جلو برود.
من این کد رو نوشتم ولی نتیجه ای رو که انتظار داشتم ازش بگیرم رو نگرفتم.
میشه راهنمایی کنید و بگید مشکل کد من دقیقا کجاست؟
ممنون
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
#one{
margin:auto;
margin-top:200px;
width:1000px;
height:105px;
background:#F90;
}
#right{
float:right;
width:40px;
padding:20px;
padding-top:45px;
height:40px;
background:#eeeeee;
}
#center{float: right;width: 840px;overflow:hidden;}
#left{
float:left;
width:40px;
padding:20px;
padding-top:45px;
height:40px;
background:#eeeeee;
}
.all_g{
width:4000px;
padding:10px;
height:85px;
background:#FCC;
}
.gal{
text-align:center;
display: inline-table;
padding-top:5px;
width:110px;
height:80px;
margin-right:10px;
background:#F63;
margin-top:3px;
}
</style>
</head>
<body>
<div id="one">
<div id="right">next</div>
<div id="center">
<div class="all_g" id="rr">
<div class="gal" id="bb" >zero</div>
<div class="gal">one</div>
<div class="gal">two</div>
<div class="gal">three</div>
<div class="gal">fore</div>
<div class="gal">five</div>
<div class="gal">six</div>
<div class="gal">seven</div>
<div class="gal">eight</div>
<div class="gal">nine</div>
<div class="gal">ten</div>
<div class="gal">eleven</div>
<div class="gal">twelv</div>
<div class="gal">therty</div>
<div class="gal">forty</div>
</div>
</div>
<div id="left">prev</div>
</div>
<script type="text/javascript">
document.getElementById('right').onclick=function( ){
var sant=document.getElementById('rr').offsetLeft;
sant=Math.abs(sant);
var tamam=sant+200;
var ss=setInterval(function(){
sant=sant+10;
document.getElementById('rr').style.marginLeft=-sant+'px';
if(sant==tamam){
clearInterval(ss);
}
},70);
}
document.getElementById('left').onclick=function() {
var sant=0;
var ss=setInterval(function(){
sant=sant+15;
document.getElementById('rr').style.marginLeft=san t+'px';
if(sant==300){
clearInterval(ss);
}
},70);
}
</script>
</body>
</html>
به این کد های من ی نگا بندازید.
میشه این رو یکبار روی سیستم خودتون اجرا کنید.
بعد از اجرا کردن کد روی دکمه next کلیک کنید.
میبینید که دایو های نارنجی که درون آن ها شماره نوشتم حرکت میکنه.
ولی
مشکل اینجاست که این حرکت ثابت هستش:
یعنی هر بار از zero شروع کرده و در nine ایست میکند.
من میخوام کاری کنم که این جوری نشه و به ترتیب بره جلوتر.
مثلا اگه آخرین دایوی که در سمت راست نشون میده nine باشد بع از زدن next آخرین دایوی که نشان داده میشود twelv باشد و به ترتیب به جلو برود.
من این کد رو نوشتم ولی نتیجه ای رو که انتظار داشتم ازش بگیرم رو نگرفتم.
میشه راهنمایی کنید و بگید مشکل کد من دقیقا کجاست؟
ممنون
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
#one{
margin:auto;
margin-top:200px;
width:1000px;
height:105px;
background:#F90;
}
#right{
float:right;
width:40px;
padding:20px;
padding-top:45px;
height:40px;
background:#eeeeee;
}
#center{float: right;width: 840px;overflow:hidden;}
#left{
float:left;
width:40px;
padding:20px;
padding-top:45px;
height:40px;
background:#eeeeee;
}
.all_g{
width:4000px;
padding:10px;
height:85px;
background:#FCC;
}
.gal{
text-align:center;
display: inline-table;
padding-top:5px;
width:110px;
height:80px;
margin-right:10px;
background:#F63;
margin-top:3px;
}
</style>
</head>
<body>
<div id="one">
<div id="right">next</div>
<div id="center">
<div class="all_g" id="rr">
<div class="gal" id="bb" >zero</div>
<div class="gal">one</div>
<div class="gal">two</div>
<div class="gal">three</div>
<div class="gal">fore</div>
<div class="gal">five</div>
<div class="gal">six</div>
<div class="gal">seven</div>
<div class="gal">eight</div>
<div class="gal">nine</div>
<div class="gal">ten</div>
<div class="gal">eleven</div>
<div class="gal">twelv</div>
<div class="gal">therty</div>
<div class="gal">forty</div>
</div>
</div>
<div id="left">prev</div>
</div>
<script type="text/javascript">
document.getElementById('right').onclick=function( ){
var sant=document.getElementById('rr').offsetLeft;
sant=Math.abs(sant);
var tamam=sant+200;
var ss=setInterval(function(){
sant=sant+10;
document.getElementById('rr').style.marginLeft=-sant+'px';
if(sant==tamam){
clearInterval(ss);
}
},70);
}
document.getElementById('left').onclick=function() {
var sant=0;
var ss=setInterval(function(){
sant=sant+15;
document.getElementById('rr').style.marginLeft=san t+'px';
if(sant==300){
clearInterval(ss);
}
},70);
}
</script>
</body>
</html>