PDA

View Full Version : سوال: چگونه یک اسلاید شو برای متن هام بسازم



Ali0Boy
پنج شنبه 03 فروردین 1391, 21:09 عصر
سلام دوستان
این عکس رو ببینید:
http://www.up.98ia.com/images/rok35a2h482xgpvha17t.png
همان طور که در تصویر می بینید، این یک کدی است که اخبار جدید را به صورت اسلاید شو نمایش می دهد و بعد از چند ثانیه، خبر بعدی.
من می خواهم همچین کاری بکنم ولی نمی دونم چطور؟!
اگه می شه راهنمایی کنید.

aminghaderi
پنج شنبه 03 فروردین 1391, 22:50 عصر
سلام.
با JQuery معمولا چنین کارهایی می کنند ، البته با Javascript نیز می توان چنین کاری کرد.
و یکی از الگریتم کار به این صورت است چندین div بروی صفحه با محتویات متفاوت تعریف می کنند و طی چند خط کد تعریف می کنند در بازه زمانی خاص عرض این div ها تعقیر کند.
برای مثال 3 div داریم که عرض اولی و دومی را 5px می دهم و عرض سومی که در حال نمایش است 30 است .
برای انجام این افکت ، باید با استفاده از حلقه for و timer کدی نوشت که بعد 5 ثانیه div سوی به عرض 5px و div دوم به عرض 30px تبدیل شود و بعد باز برای 2 و 1 و سپس برگرده از اول همین مراحل را طی کند.
البته نمونه JQuery آماده آن در اینترنت زیاد هست ، با یه جستجو به کلی نمونه می رسید.
در گوگل جستجو کنید => free download JQuery SlidShow

بیشتر از این متاسفانه در توانم نیست راهنمایی کنم (به دلیل کمبود وقت و حوصله).
امیدوارم راهنمایی کوتاهم مفید بوده باشه.

Ali0Boy
جمعه 04 فروردین 1391, 00:58 صبح
آقایون مشکلم حل شد. تو نت گشتم ولی چیزی که من میخواستم نیافتم. برای همین دوباره خودم دست بکارشدم. اومدم به هر تعداد عنوان div ساختم با آی دی یکسان و فقط در پایان نام اونها یک عدد متفاوت گذاشتم(مثلا tr1 , tr2 , tr3 , ...) و بعد با جاوا اسکریپت یک تابع داخل setinterval نوشتم و به ترتیب اونها رو غیر فعال کردم.

div های ایجاد شده:

<div style="margin-bottom:35;" id="rndPst1"><a href="index.php?idpst=1" >سلام بر تمامی دوستان عزیز</a></div>
<div style="margin-bottom:35; display:none" id="rndPst2"><a href="index.php?idpst=2" >خوب آب و هوای جوانی چطور است؟</a></div>
به خاصیت display نگاه کنید. من برای div اولی display:none نگذاشتم ولی برای دومی گذاشتم چون همان طور که می بینید در کد اسکریپت از div دوم شروع کردم. شاید بپرسید خوب از div اولی شروع می کردید! من تست کردم دیدم که setinterval بعد از زمانی که مشخص کرده ایم شروع به کار می کنه و وقتی آدرس سایت رو باز می کنی برای چند لحظه در آن مکان مربوطه هیچ چیزی نیست و این از نظر من برای یک سایت نمی تونه خوب باشه. البته بستگی به شما داره.

کد جاوا اسکریپت:


<script type="text/javascript">
var revi=2;
$(document).ready(function() {
setInterval(function(){
if(document.getElementById('rndPst'+(revi-1))) document.getElementById('rndPst'+(revi-1)).style.display="none";
if(revi>2){ revi=1; }
document.getElementById('rndPst'+revi).style.displ ay="block";
revi++; },2500);
});
</script>

کد فعال سازی و غیر فعال سازی رو گذاشتم شاید بدرد دوستان بخوره. ممنون از دوستانی که در این بحث شرکت کردند. دوستان کد بهتری داشتند که شیوه اسلاید بندیش رو قشنگتر کنه ممنون می شوم اینجا گذاشته و در مورد خطهای اون نیز توضیح دهند[برای رفع هرگونه ابهام و مشکلی].
اگه به درد کسی خورد تشکر یادش نره. :متفکر: