PDA

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



olampiad
جمعه 24 آبان 1392, 22:16 عصر
سلام
به این کد به نگا بندازید.

<!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>slide</title>
<script type="text/javascript">
window.onload=loadshod;
var aks=new Array('../../../Public/Pictures/Sample Pictures/Chrysanthemum.jpg','../../../Public/Pictures/Sample Pictures/Desert.jpg','../../../Public/Pictures/Sample Pictures/Hydrangeas.jpg','../../../Public/Pictures/Sample Pictures/Jellyfish.jpg');
var adad=0;

var index = 0;
var shomare=0;

function loadshod(){
document.getElementById('next').onclick=next;
document.getElementById('prev').onclick=prev;

var img = document.getElementById('aks');

setInterval(function(){
document.getElementById('aks').src=aks[shomare];
shomare++;
if(shomare===4){
shomare=0;
}
},5400);
}
function next(){
adad++;
if(adad==aks.length){
adad=0;
}
document.getElementById('aks').src=aks[adad];
return false;
}

function prev(){
if(adad==0){
adad=aks.length;
}
adad--;
document.getElementById('aks').src=aks[adad];
return false;
}

</script>
</head>
<body>
<img src="../../../Public/Pictures/Sample Pictures/Chrysanthemum.jpg" id="aks" width="600" />
<a href="#" id="next">next</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" id="prev">prev</a>
<br />
</body>
</html>



من تو اینجا یه اسلاید شو ساده نوشتم.
که از هر 5400 میلی ثانیه عوض می شه.
می تونم با استفاده از دکمه های next و prev هم تصاویر اسلایدر رو عوض کنم.

حالا من اینجا یه مشکلی دارم:
اتو ماتیک کردن اسلاید شو و استفاده از دکمه های next و prev در اسلاید شو باهم جور در نمیان.
مثلا یه عکس به طور اتوماتیک عوض شده و 800 میلی ثانیه مونده که عکس بعدی هم عوض شه من روی یکی از دکمه ها کلیک می کنم و تصویر اسلایدر عوض می شه اما بعد از 800 میلی ثانیه دوباره عکس عوض می شه.اینطوری نظم اسلاید به هم می خوره.
چه طور می تونم کاری کنم که با زدن دکمه های تغییر دهنده 5400 میلی ثاتیه اتوماتیک کننده از 0 شروع بشه.

امیدوارم منظورمو متوجه شده با شین.
بی نهایت ممنون.

olampiad
جمعه 24 آبان 1392, 22:44 عصر
چه طور می تونم به این اسلایدرم یه افکت ساده ای هنگام عوض شدن بدم.
بی نهایت ممنون

jalil_gh
جمعه 24 آبان 1392, 22:54 عصر
به این صورت می‌تونی بنویسی:
window.onload=loadshod;

var aks=new Array('../../../Public/Pictures/Sample Pictures/Chrysanthemum.jpg','../../../Public/Pictures/Sample Pictures/Desert.jpg','../../../Public/Pictures/Sample Pictures/Hydrangeas.jpg','../../../Public/Pictures/Sample Pictures/Jellyfish.jpg');
var adad=0;

var index = 0;
var shomare=0;

var interval;

function loadshod(){
document.getElementById('next').onclick=next;
document.getElementById('prev').onclick=prev;

start();
}

function start() {
interval = setInterval(function(){
document.getElementById('aks').src=aks[shomare];
shomare++;
if(shomare===4){
shomare=0;
}
},5400);
}

function next(){
clearInterval(interval);
adad++;
if(adad==aks.length){
adad=0;
}
document.getElementById('aks').src=aks[adad];
start();
return false;
}

function prev(){
clearInterval(interval);
if(adad==0){
adad=aks.length;
}
adad--;
document.getElementById('aks').src=aks[adad];
start();
return false;
}

olampiad
جمعه 24 آبان 1392, 23:02 عصر
سلام
من چهارتا تابع دارم که هر کدام کاری انجام می دن.
چه طور میتونم کاری کنم که توابع من در عرض 20 ثانیه همشون کار کنن.مثلا هر کدام به مدت 5 ثانیه کار کنه.
و پشت سر هم ادامه داشته باشن.
آیا این کتار ممکنه
بی نهایت ممنون.

olampiad
شنبه 25 آبان 1392, 16:32 عصر
تشکر فراوان از دوستان بابت پاسخ به سوالات

لطفا به این کد یه نگا بندازید.

document.getElementById('matn').style.opacity=0.3;
document.getElementById('matn').innerHTML=matn[3];
document.getElementById('matn').style.opacity=0.99 ;

من تو اینجا می خوام یه چیزی شبیه fade in یا fade out یا fade to جی کوئری بنویسم.
ولی این کدی که من نوشتم خیلی زود کار می کنه حالا چطور می تونم اون وسط یه تا خیر بندازم
بی نهایت ممنون