loading...

ابزارها قالب

آموزش ایجاد یک اسلایدر ساده در پس زمینه ی اشیاء صفحه با استفاده از css و jquery و javascript

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 2406 پنجشنبه 14 خرداد 1394 نظرات (2)

در مطالب قبلی ، مطلبی با موضوع تغییر رنگ پس زمینه داشتیم. در این مطلب ، که به درخواست یکی از کاربران قرار داده شده است ، ما قرار است پس زمینه ای ایجاد کنیم که تصویر آن هر چند ثانیه ، عوض شود.

نکته: ما در این کدَک تغییرات را بر روی تگ body اعمال می کنیم. اگر شما بخواهید ، می توانید این تغییرات را روی هر المنتی از صفحه ایجاد کنید. یعنی تغییر پس زمینه برای تمام قسمت های صفحه قابل استفاده است.

برای این کار ابتدا ما باید با استفاده از Css یک مقدار پیشفرض برای پس زمینه مشخص کنیم.

<<<code>>>

<style>

body{

background: url('http://up.toolstheme.ir/up/persian/toolstheme/logo.png') no-repeat center #333;

height: 100%;

}

</style>

<<</code>>>

 دموی آنلاین کد بالا

رنگ سبز: آدرس تصویر را در آن مشخص کرده ایم. شما می توانید به جای آدرس وارد شده ، آدرس هر تصویر دیگری را وارد کنید.

رنگ آبی: نشان می دهد که تصویر پس زمینه نباید در طول و عرض تکرار شود.

رنگ بنفش: موقعیت قرارگیری تصویر را نشان می دهد (مرکز)

رنگ قرمز: رنگ قسمت های خالی را مشخص می کند. ما در اینجا از رنگی نزدیک به مشکی استفاده کرده ایم. شما می توانید با استفاده از لینک زیر ، کد رنگ مورد نظر خود را بسازید. (البته می توانید از نام یک سری رنگ ها مثل red , blue , yellow , ... هم استفاده کنید.)

باز کردن کد رنگ ساز

حالا بعد از این که ما حالت پیشفرض را ایجاد کردیم باید با استفاده از javascript این امکان را ایجاد کنیم که بعد از هر چند ثانیه ، تصویر عوض شود. ما یه کم از جی کوئری هم برای تغییر تصویر پس زمینه کمک می گیریم.

این هم کد جاوا اسکریپت:

<<<code>>>

<script type="text/javascript" src="http://www.toolstheme.ir/js/jquery.js"></script> <!-- کتابخانه ی جی کوئری -->

<script>

(function(){

   var images = new Array( 'http://up.toolstheme.ir/up/persian/toolstheme/logo.png' , 'http://up.toolstheme.ir/view/56302/jquery-animation-functions.jpg' , 'http://up.toolstheme.ir/view/236441/online-web-code-browser-2.jpg' , 'http://up.toolstheme.ir/view/236604/loading-style.jpg' , 'http://up.toolstheme.ir/view/153676/movable-background-by-jquery.jpg' ),

   nowImage = 0, // متغییری برای تشخیص این که تصویر چندم است

   time = 1000,

   inter = setInterval( function(){ // تابعی برای ایجاد چرخه ی همیشگی انجام یک تابع

      nowImage++;

      if( nowImage >= images.length ) nowImage = 0;

      $('body').css( 'backgroundImage' , 'url("'+images[nowImage]+'")' );

   } , time );

})();

</script>

<<</code>>>

نتیجه ی نهایی کد ها - دمو ساز

رنگ قرمز: من در این قسمت یک متغیر آرایه ای ایجاد کرده ام که آدرس چند تصویر در آن وجود دارد. شما می توانید ، آدرس ها را به هر آدرسی که می خواهید تغییر دهید و تعداد این تصاویر را تا بی نهایت بیشتر کنید.

رنگ آبی: این متغیر مشخص می کند که هر چند میلی ثانیه یک بار تصویر عوض شود.

رنگ سبز: اگر بعد از یک واحد اضافه کردن مقدار nowImage این متغیر بزرگتر مساوی با تعداد تصاویر ما شود ، میزان آن ریست می شود (دوباره صفر می شود)

رنگ بنفش: انتخاب عضوی از آرایه ی تصاویر با عدد nowImage

پیشنهاد های تمرینی من:

1- حالا که طرز ایجاد یک پس زمینه با تغییر تصویر بعد از چند میلی ثانیه را یاد گرفتید ، حتما می توانید یک اسلایدر ساده ایجاد کنید. لازم نیست امکانات پیچیده ای برای آن ایجاد کنید. اگر تازه کار هستید ، فقط سعی کنید یک بلاک با تگ div ایجاد کنید و این استایل ها و اسکریپت ها را برای آن تعریف کنید. بهتر است از آی دی (id) یا کلاس (class) استفاده کنید.

2- سعی کنید کاری کنید که بعد از اتمام یک دور از این نمایش تصویر ، دیگر تصاویر از سر شروع نشوند. می توانید از تابع clearInterval استفاده کنید.

3- هر تغییری که به ذهنتان می رسد را ایجاد کنید و اگر به مشکلی برخوردید حتما در بخش نظرات بپرسید.

مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط مریم در تاریخ 7 سال پیش و 19:22 دقیقه ارسال شده است

سلام . میشه بگید چطور میتونم از این کد تغییر پس زمینه ی خودکار برای پس زمینه ی یک DIV استفاده کنم ؟

مثلا من داخل سایتم چند تا بلاک دارم. میخوام توی یکی از این بلاک ها که یک فرم جستجو قرار داره ، پس زمینه اش رو متغیر کنم و خود به خود تغییر پیدا کنه . و افکت fade هم داشته باشه .

و البته فرم جستجو و بخش های دیگش روی تصویر قرار بگیره .

کد دومی که داخل مقاله نوشتید رو گذاشتم ولی پس زمینه ی کل سایت رو تغییر میده ولی من می خوام فقط پس زمینه مربوط به یک قسمت مشخص و خاص باشه .

ممنون میشم کمک کنید . توروخدا .
پاسخ : سلام
حالت fade رو نمیشه با همین کد ایجاد کرد. ولی برای این که تغییر پس زمینه رو برای یک شی خاص در صفحه ایجاد کنید ، می تونید از این آدرس کمک بگیرید:
http://tools.toolstheme.ir/-Pv

این نظر توسط ارمان در تاریخ 7 سال پیش و 19:14 دقیقه ارسال شده است

دمت گرم عالیه ♥


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3195
  • آی پی امروز : 29
  • آی پی دیروز : 94
  • بازدید امروز : 178
  • باردید دیروز : 191
  • گوگل امروز : 2
  • گوگل دیروز : 9
  • بازدید هفته : 969
  • بازدید ماه : 9,466
  • بازدید سال : 100,836
  • بازدید کلی : 1,787,271
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص