Variable
سه شنبه 27 تیر 1391, 01:28 صبح
شما برای اینکه یه اسلاید شو برا خودتون داشته باشید
باید تصور کنید یک کادر بسته دارید . زیر این کادر بسته یک عنصر دارزو پپهن دارید که مثلا فقط یک دهمش از تو این کادر بسته معلومه
خب برای دیدن بقیه اون عنصر درازو پهن چیکار میکنید؟
باید این عنصر رو زیر این کادر به طرف دیگه جرکت داد تا بقیه قسمت هاش دیده بشن
اینچا ما 5 تا عکس داریم با سایز عرض یکسان یعنی
width:150px;
که جمعا میشه 750 پیکسل
که زیره تگ دیو ما که همون کادر بسته است قسمتهای دیگش مخفیه .
میام با جا وا اسکریپت در یک فاصله زمانی کم . مقداره خصوصیت مجموعه 5 تایی این عکس رو تغییر میدم . یعنی حولشون میدم جلو
با تغییر خصوصیت
margin-left
<html>
<head>
</head>
<style type="text/css">
ul{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
width:1000px;
padding:0;
margin-top:0;
}
li{
list-style: none;
float:left;
}
.myDiv{
border:1px solid black;
overflow: hidden;
width:150px;
padding:0;
}
#setButton{
margin-top: -25px;
}
.nav{
border-style: none;
border-radius: 10px;
background-color: #45abff;
cursor: pointer;
color: #fff;
}
</style>
<body>
<div class="myDiv">
<ul id="myUl">
<li><img id="1" src="pic/2.jpg"></li>
<li><img id="2" src="pic/3.jpg"></li>
<li><img id="3" src="pic/4.jpg"></li>
<li><img id="4" src="pic/5.jpg"></li>
<li><img id="5" src="pic/1.jpg"></li>
</ul>
</div>
<div id="setButton">
<button id="0" class="nav">1</button>
<button id="1" class="nav">2</button>
<button id="2" class="nav">3</button>
<button id="3" class="nav">4</button>
<button id="4" class="nav">5</button>
</div>
<div id="nav">
<button id="next">next</button>
<button id="back">back</button>
<button id="start">pause</button>
</div>
<script type="text/javascript">
(function(){
var i=0;
var listWidth=150,i=0;
var uls=document.getElementById('myUl'),
style=document.getElementById('myUl').style;
var setBtn=document.getElementById('setButton');
var next=document.getElementById('next');
var back=document.getElementById('back');
var start=document.getElementById('start');
var timer=function(){
if(isNaN(parseInt(style.marginLeft))){style.margin Left="0px";return;}
if(parseInt(style.marginLeft)<=-600)style.marginLeft="0px";
else style.marginLeft=parseInt(style.marginLeft)-listWidth;
};
var nextFunc=function(j){
style.marginLeft=(listWidth*(-j));
i=j;
};
var bind=function(evt,obj,callback){
if(window.addEventListener)obj.addEventListener(ev t,callback);
else if(window.attachEvent)obj.attachEvent("on"+evt,callback);
};
bind('click',setBtn,function(e){
if(e.target)nextFunc(e.target.id);
else nextFunc(e.srcElement.id);
});
bind('click',next,function(e){
if(isNaN(parseInt(style.marginLeft))) style.marginLeft="0px";
if(parseInt(style.marginLeft)<=-600)style.marginLeft="0px";
else style.marginLeft=parseInt(style.marginLeft)-listWidth;
})
bind('click',back,function(e){
if(isNaN(parseInt(style.marginLeft))) style.marginLeft="0px";
if(parseInt(style.marginLeft)>=0)style.marginLeft="-600px";
else style.marginLeft=parseInt(style.marginLeft)+listWi dth;
})
bind('click',start,function(e){
var target=(e.target)?e.target:e.srcElement;
var toggle=target.innerHTML;
if(toggle=="start"){
nextInt=setInterval(timer,4000);
toggle="pause";
}else if(toggle=="pause"){
clearInterval(nextInt);
toggle="start";
}
target.innerHTML=toggle;
})
var nextInt=setInterval(timer,4000);
})();
</script>
</body>
</html>
باید تصور کنید یک کادر بسته دارید . زیر این کادر بسته یک عنصر دارزو پپهن دارید که مثلا فقط یک دهمش از تو این کادر بسته معلومه
خب برای دیدن بقیه اون عنصر درازو پهن چیکار میکنید؟
باید این عنصر رو زیر این کادر به طرف دیگه جرکت داد تا بقیه قسمت هاش دیده بشن
اینچا ما 5 تا عکس داریم با سایز عرض یکسان یعنی
width:150px;
که جمعا میشه 750 پیکسل
که زیره تگ دیو ما که همون کادر بسته است قسمتهای دیگش مخفیه .
میام با جا وا اسکریپت در یک فاصله زمانی کم . مقداره خصوصیت مجموعه 5 تایی این عکس رو تغییر میدم . یعنی حولشون میدم جلو
با تغییر خصوصیت
margin-left
<html>
<head>
</head>
<style type="text/css">
ul{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
width:1000px;
padding:0;
margin-top:0;
}
li{
list-style: none;
float:left;
}
.myDiv{
border:1px solid black;
overflow: hidden;
width:150px;
padding:0;
}
#setButton{
margin-top: -25px;
}
.nav{
border-style: none;
border-radius: 10px;
background-color: #45abff;
cursor: pointer;
color: #fff;
}
</style>
<body>
<div class="myDiv">
<ul id="myUl">
<li><img id="1" src="pic/2.jpg"></li>
<li><img id="2" src="pic/3.jpg"></li>
<li><img id="3" src="pic/4.jpg"></li>
<li><img id="4" src="pic/5.jpg"></li>
<li><img id="5" src="pic/1.jpg"></li>
</ul>
</div>
<div id="setButton">
<button id="0" class="nav">1</button>
<button id="1" class="nav">2</button>
<button id="2" class="nav">3</button>
<button id="3" class="nav">4</button>
<button id="4" class="nav">5</button>
</div>
<div id="nav">
<button id="next">next</button>
<button id="back">back</button>
<button id="start">pause</button>
</div>
<script type="text/javascript">
(function(){
var i=0;
var listWidth=150,i=0;
var uls=document.getElementById('myUl'),
style=document.getElementById('myUl').style;
var setBtn=document.getElementById('setButton');
var next=document.getElementById('next');
var back=document.getElementById('back');
var start=document.getElementById('start');
var timer=function(){
if(isNaN(parseInt(style.marginLeft))){style.margin Left="0px";return;}
if(parseInt(style.marginLeft)<=-600)style.marginLeft="0px";
else style.marginLeft=parseInt(style.marginLeft)-listWidth;
};
var nextFunc=function(j){
style.marginLeft=(listWidth*(-j));
i=j;
};
var bind=function(evt,obj,callback){
if(window.addEventListener)obj.addEventListener(ev t,callback);
else if(window.attachEvent)obj.attachEvent("on"+evt,callback);
};
bind('click',setBtn,function(e){
if(e.target)nextFunc(e.target.id);
else nextFunc(e.srcElement.id);
});
bind('click',next,function(e){
if(isNaN(parseInt(style.marginLeft))) style.marginLeft="0px";
if(parseInt(style.marginLeft)<=-600)style.marginLeft="0px";
else style.marginLeft=parseInt(style.marginLeft)-listWidth;
})
bind('click',back,function(e){
if(isNaN(parseInt(style.marginLeft))) style.marginLeft="0px";
if(parseInt(style.marginLeft)>=0)style.marginLeft="-600px";
else style.marginLeft=parseInt(style.marginLeft)+listWi dth;
})
bind('click',start,function(e){
var target=(e.target)?e.target:e.srcElement;
var toggle=target.innerHTML;
if(toggle=="start"){
nextInt=setInterval(timer,4000);
toggle="pause";
}else if(toggle=="pause"){
clearInterval(nextInt);
toggle="start";
}
target.innerHTML=toggle;
})
var nextInt=setInterval(timer,4000);
})();
</script>
</body>
</html>