یادداشتها و چرکنویس های من… یادداشتها ، مطالب ، نکات مهم و کاربردی …
استفاده از اسلایدر ها برای زیبایی سایت و هم چنین مشخص نمودن مطالب مهم یکی از مواردی هست که در طراحی وب استفاده می شود.
اسلایدر های آماده زیادی برای این کار وجود داره اما بعضا حجم بسیار بالایی دارن و از این بابت مشکلاتی رو ایجاد میکنند.
در این مطلب بسادگی یاد میگیرید که یه اسلایدر ساده با جی کوئری بسازید.
کدهای HTML
برای شروع این کدهای HTML رو در صفحه قرار میدیم.
<div class="slides"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
خوب توضیح خاصی که نداره،حالا کمی براش استایل اضافه می کنیم.
.slides { position:relative;}
.slides img { position:absolute; left:0; top:0; }
خوب حالا هم نوبت کدهای جی کوئری هستش.
کدهای jQuery
$(function(){
$('.slides img:gt(0)').hide();
setInterval(function(){
$('.slides :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slides');},
3000);
});
به همین راحتی،درباره کدهای جی کوئری بگم که اولش همه تصاویر موجود رو مخفی میکنیم،حالا با setInterval میخوایم یه تابع رو در بازه زمانی مشخص فرخوانی کنیم اینجا هر ۳ ثانیه یکبار،خوب در این تابع اولین تصویر رو مخفی میکنیم و بعدش تصویر بعدی رو ظاهر میکنیم و بعدشم دوباره همون تصویر اولی که مخفی کردیم رو به انتهای slides اضافه میکنیم،اینطوری مثل حلقه ی تکرار میشه و تصاویر برای ما نشون داده میشن.
