ورود

View Full Version : سوال: position اسلاید شو


alimahboobi
دوشنبه 16 اردیبهشت 1392, 19:35 عصر
سلام من یه کد اسلاید شو دارم که تو یکی از تاپیکا دیدمش خیلی خوب بود ولی یه مشکلی هست اونم این که سایز و مکان عکسای اسلاید شو رو چه جوری می تونم تغییر بدم که تو سایتم ازش استفاده کنم؟؟؟

اینم کدشه:(هر چی سعی کردم نشد!!!):متفکر:

<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>
mehbod.rayaneh
سه شنبه 17 اردیبهشت 1392, 13:59 عصر
سلام
فایل اسلاید شو را کامل بذارید تا بشه راهنمایی کرد!
با این کدی ک شما دادید برا کم کردن عرض باید width:1000px; را کم کنید!
alimahboobi
پنج شنبه 19 اردیبهشت 1392, 10:43 صبح
سلام اقا مهبد . کل فایل اسلاید شو همینه فقط عکس ها رو لود نکردم . فایل css یا jqurey هم نداره اگه میشه راهنماییم کنید خیلی ممنون میشم
فقط می خوام positoin و سایزشو تغییر بدم همین که تو سایزم ازش استفاده کنم
mehbod.rayaneh
پنج شنبه 19 اردیبهشت 1392, 10:52 صبح
خوب عکساشم بذارید!
آدم اینجوری نمیفهمه چی ب چیه!!! :خجالت:
alimahboobi
پنج شنبه 19 اردیبهشت 1392, 12:34 عصر
شما جون بخواهید عکس که چیزی نیست :چشمک:
http://uplod.ir/9bwwb79rmy15/index.zip.htm
اینم فایل کاملش فقط دستت درست خیلی گیرم ممنون میشم کمکم کنی
mehbod.rayaneh
پنج شنبه 19 اردیبهشت 1392, 20:43 عصر
من ک منطق این اسلایدرتو نفهمیدم!!! ولی 1 جورایی درسش کردم!
اینم کدهای فایل index :


<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:300px;
height:300px;
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 src="pic/2.jpg" width="300" height="300"></li>
<li><img src="pic/3.jpg" width="300" height="300"></li>
<li><img src="pic/4.jpg" width="300" height="300"></li>
<li><img src="pic/5.jpg" width="300" height="300"></li>
<li><img src="pic/1.jpg" width="300" height="300"></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>

<script type="text/javascript">
(function(){

var listWidth=300,i=0;
var uls=document.getElementById('myUl'),
style=document.getElementById('myUl').style;
var sBtn=document.getElementById('setButton');

sBtn.addEventListener('click',function(e){
nextFunc(e.target.id);
},false);

function nextFunc(j){
style.marginLeft=(listWidth*(-j));
i=j;
}

var nextInt=setInterval(function(){
if(i<4){
i++;
}
else{
i=0;
}
nextFunc(i);
},4000);

})();

</script>
</body>
</html>

سایزو کردم 300پیکسل.
هر سایزی میخوای بذاری باید چند جا سایزو عوض کنی!
1. توی استایل توی کلاس myDiv
2. جلوی هر عکس : <li><img src="pic/2.jpg" width="300" height="300"></li> باید عرض (width) و ارتفاع (height) را عوض کنید.
3. توی خط اول جاوا اسکریپتی ک نوشته var listWidth=300,i=0;
ب همین سادگی!
موفق باشی :)
alimahboobi
جمعه 20 اردیبهشت 1392, 10:31 صبح
خیلی ممنون فقط نگفتی چه جوری می تونم position بهش بدم ؟؟؟:خجالت:
mehbod.rayaneh
جمعه 20 اردیبهشت 1392, 17:44 عصر
position?! کلا کدها را بذار توی 1 div جدید و پوزیشن اون دیو را مشخص کن!!!
alimahboobi
شنبه 21 اردیبهشت 1392, 11:07 صبح
ممنونم این کارا رو می کنم اگه مشکلی بود بازم به زحمت می اندازمت مرسی