آموزش طراحی وب سایت – SlideShow With Amazing Effect

چهارشنبه, ۳ام شهریور , ۱۳۸۹ | ۳۴ دیدگاه

در بسیاری از مواقع ایجاد تحرک و پویایی در طراحی وب سایت بسیار مورد نیاز است . اسلاید شو ها (Slide show) یکی از بهترین گزینه ها برای ایجاد تحرک و پویای در وب سایت هستند که البته از نظر کاربری وب سایت نیز نقش بسیار مهمی دارند.
در این خودآموز با یک نمونه از ساده ترین اسلاید شو ها که دارای دو نمونه اسلاید متفاوت است آشنا خواهیم شد.البته این اسلاید شو در عین سادگی کاربردهای بسیار زیادی نیز دارد و امیدوارم مورد استفاده قرار گیرد.
طبق معمول در ابتدایی ترین مرحله ، نمونه نهایی این اسلاید شو را در اینجا ملاحظه نمائید و سپس فایلهای مربوط به این اسلاید شو را دانلود کنید.





در مرحله اول فایلهای js و css مربوط به این اسلاید شو را با استفاده از کدهای HTML زیر در صفحه وب خود قرار می دهیم.قبل از انجام این کار به آدرس دهی ها بسیار دقت کنید و آدرس فایلها را به طور صحیح در کد HTML وارد نمائید.


<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript"src="js/jquery.cycle.all.js"></script>

کدهای بالا را در قسمت head صفحه HTML خود وارد نمائید. سپس نوبت به قرار دادن لینک فایل css مربوط به اسلاید شو میرسد که به روش زیر وارد صفحه وب می شود.


<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

پس از قرار دادن لینک فایلهای مورد نیاز در قسمت head صفحه وب نوبت به فراخوانی تابع جاوااسکریپت jquery.cycle.all.js در صفحه وب میرسد که توسط کد زیر انجام می گیرد.


<script type="text/javascript">
	$(document).ready(function(){
		$('#myslides').cycle({
			fx: 'fade',
		 	speed: 5000,
			timeout: 2000
		});
	});
</script>

پس از وارد نمودن کد اسکریپت بالا تابع در صفحه وب فراخوانی می شود و در اینجا کافیست ما از style های تعریف شده برای این تابع استفاه نمائیم.


<body>
	<div id="myslides">
		<img src="images/capitol.jpg" />
		<img src="images/flowers.jpg" />
		<img src="images/countryscene.jpg" />
	</div>
</body>

ملاحظه می نمائید که برای مشخص نمودن تصاویری که این تابع باید آنها را اسلاید کند در

بالا از id=”myslides” استفاده شده است. این تابع هر تعداد تگ <img/> را که در بین تگ

با id=”myslides” قرار دارد را اسلاید می کند.
برای تجربه افکت های مختلف می توانید در script فراخوانی تابع در قسمت fx: ‘fade’, از افکت های مختلف دیگر استفاده کنید.
در زیر لیست تعدادی ز این افکت ها را ملاحظه می فرمائید. فقط کافیست که عبارت افکت مورد نظر را به جای fade در مثال بگذارید و افکت جدید را تجربه کنبد. همچینین در این تابع می توانید سرعت وزمان توقف اسلاید ها را نیز تعیین نما یئید. واحد اعداد میلی ثانیه است به این معنی که هر ۱۰۰۰ میلی ثانیه معادل یک ثانیه است.

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • none
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

امیدوارم که مورد استفاده قرار بگیرد. با آرزوی موفقیت.

Be Sociable, Share!


۳۴ دیدگاه


  1. کاظم
    ۳ شهریور ۱۳۸۹

    خیلی عالی بود
    واقعا دست مریضا
    دستتون درد نکنه




  2. امیر
    ۴ شهریور ۱۳۸۹

    واقعا سایت پربار و جالبی دارید
    با تشکر




  3. ریحانه
    ۴ شهریور ۱۳۸۹

    سلام سایتتون بسیار پربار و عالیه
    خسته نباشید 🙂

    یه سوال خیلی بی ربط… امکان اینکه ویدیو بذاریم بک گراند دسکتاپ کامپوتر وجود داره؟




  4. کامران
    ۴ شهریور ۱۳۸۹

    تو Xp که به احتمال ۹۹% نه اما تو ۷ فکر میکنم بشه




  5. وحید
    ۵ شهریور ۱۳۸۹

    آموزش ساده و کاربردی بود
    /
    @ کامنت بالا : تو هر ویندوزی با یه برنامه کم حجم ممکنه




  6. خودش
    ۶ شهریور ۱۳۸۹

    ممنون !
    گره از مشکلاتتون باز شه.




  7. ریحانه
    ۶ شهریور ۱۳۸۹

    @ vahid & kamran :
    thanx 🙂




  8. بهلول
    ۱۵ شهریور ۱۳۸۹

    سلام دوست عزیز ما تو جوملا خیلی دردسر میکشیم تا یه اسلاید مچ کنیم ولی میبینیم با جاوا و یکم کد نویسی چقد راحت میشه اینکار رو انجام داد
    واقعا دستتون درد نکنه




  9. فر
    ۲۸ شهریور ۱۳۸۹

    خیلی خوبه(من میخام صفحه وب واسه خودم داشته باشم خیالی مرسی




  10. محمد
    ۱۱ مهر ۱۳۸۹

    من در سایتی که طراحی کردم میخوام یه افکت مثل سایت بی بی سی که خبر تایپ میشه بعد بالا میره که اختمالا کد جاوا هست داشته باشم لطفا مرا راهنمایی منید




  11. محدثه
    ۱۸ مهر ۱۳۸۹

    مرسی عالی بود خسته نباشین




  12. iman
    ۱ آبان ۱۳۸۹

    merci




  13. مهدی
    ۲ آذر ۱۳۸۹

    عالی بود ممنون




  14. jojo
    ۱۳ آذر ۱۳۸۹

    فوق العاده
    خیلی متشکر




  15. وحید
    ۲۶ آذر ۱۳۸۹

    ممنون از این آموزش کاربردی




  16. میلاد
    ۱ دی ۱۳۸۹

    مرسی از گوگگل اومدم نیاز مبرم داشتم ممنون




  17. محسن
    ۷ دی ۱۳۸۹

    متشکرم

    آیا کتاب آموزشی فارسی هم موجود هست لفاً راهنمایی فرمایید.




  18. حسن لاچیانی
    ۱۹ دی ۱۳۸۹

    سلام من تازه یک دامین ثبت کردم ولی نمیدانم بعدش باید چکار کنم تا سایتم طراحی بشه




  19. مهسا
    ۲۸ دی ۱۳۸۹

    سلام آگه می شه منو کمک کنید که چگونه گواهینامه یا همون certification بسازم ممنون می شم .




  20. رامین
    ۱۳ اردیبهشت ۱۳۹۰

    اینجا ظاهرا بهشت طراحان وب سایته




  21. حجت
    ۲۰ اردیبهشت ۱۳۹۰

    سلام
    من این ترتیب کدارو تو قالب وبلاگم اوردم اما وقت مشاهده وبلاگ فقط سه تا عکس نمایس داده میشن! میشه بگید علت چیه؟
    ممنون




  22. حجت
    ۲۰ اردیبهشت ۱۳۹۰

    خیلی ممنون
    درست شد.
    عالی عالی بود




  23. زينب
    ۵ تیر ۱۳۹۰

    سلام

    با تشکر از سایت بسیار خوبتون . بنده به یک مشکل بر خوردم.
    این کدها رو در سایتم وارد کرده ام ولی فقط در fire fox درست میدهد و در internet explorer به صورت سه تا عکس زیر هم نشون میده.

    خواهشمند است بنده را در این خصوص هر چه سریعتر کمک کنید.

    باتشکر فراوان




  24. mohammad
    ۱۸ تیر ۱۳۹۰

    salam
    man mikham in systemo vase banner sitam piyade konam ama nemitonam andazeye aksro bozorg konam
    lotfan rahnamayi konid




  25. مصطفیl
    ۲۱ مرداد ۱۳۹۰

    با سلام سیستم وب سایت من دیتا لایفه
    ایا میشود این اسلایدر را روی این سیستم نصب کرد من نصب کردم سه تا مربع کنار هم نشون داد
    لطفا راهنمایی کنید




  26. رضا
    ۲۸ مرداد ۱۳۹۰

    با سلام
    خیلی خوب بود
    حالا اگه بخواهیم هر بار که اسلاید میخورد و تصویر جدید را نمایش میدهد با یک افکت متفاوت این کار صورت بگیرد، باید چکار کنیم؟؟
    مرسی



دیدگاه خود را بنویسید