در بسیاری از مواقع ایجاد تحرک و پویایی در طراحی وب سایت بسیار مورد نیاز است . اسلاید شو ها (Slide show) یکی از بهترین گزینه ها برای ایجاد تحرک و پویای در وب سایت هستند که البته از نظر کاربری وب سایت نیز نقش بسیار مهمی دارند.
در این خودآموز با یک نمونه از ساده ترین اسلاید شو ها که دارای دو نمونه اسلاید متفاوت است آشنا خواهیم شد.البته این اسلاید شو در عین سادگی کاربردهای بسیار زیادی نیز دارد و امیدوارم مورد استفاده قرار گیرد.
طبق معمول در ابتدایی ترین مرحله ، نمونه نهایی این اسلاید شو را در اینجا ملاحظه نمائید و سپس فایلهای مربوط به این اسلاید شو را دانلود کنید.
در مرحله اول فایلهای js و css مربوط به این اسلاید شو را با استفاده از کدهای HTML زیر در صفحه وب خود قرار می دهیم.قبل از انجام این کار به آدرس دهی ها بسیار دقت کنید و آدرس فایلها را به طور صحیح در کد HTML وارد نمائید.
کدهای بالا را در قسمت head صفحه HTML خود وارد نمائید. سپس نوبت به قرار دادن لینک فایل css مربوط به اسلاید شو میرسد که به روش زیر وارد صفحه وب می شود.
پس از قرار دادن لینک فایلهای مورد نیاز در قسمت head صفحه وب نوبت به فراخوانی تابع جاوااسکریپت jquery.cycle.all.js در صفحه وب میرسد که توسط کد زیر انجام می گیرد.
پس از وارد نمودن کد اسکریپت بالا تابع در صفحه وب فراخوانی می شود و در اینجا کافیست ما از style های تعریف شده برای این تابع استفاه نمائیم.
ملاحظه می نمائید که برای مشخص نمودن تصاویری که این تابع باید آنها را اسلاید کند در
بالا از id=”myslides” استفاده شده است. این تابع هر تعداد تگ <img/> را که در بین تگ
با id=”myslides” قرار دارد را اسلاید می کند.
برای تجربه افکت های مختلف می توانید در script فراخوانی تابع در قسمت fx: ‘fade’, از افکت های مختلف دیگر استفاده کنید.
در زیر لیست تعدادی ز این افکت ها را ملاحظه می فرمائید. فقط کافیست که عبارت افکت مورد نظر را به جای fade در مثال بگذارید و افکت جدید را تجربه کنبد. همچینین در این تابع می توانید سرعت وزمان توقف اسلاید ها را نیز تعیین نما یئید. واحد اعداد میلی ثانیه است به این معنی که هر ۱۰۰۰ میلی ثانیه معادل یک ثانیه است.
در این خودآموز با یک نمونه از ساده ترین اسلاید شو ها که دارای دو نمونه اسلاید متفاوت است آشنا خواهیم شد.البته این اسلاید شو در عین سادگی کاربردهای بسیار زیادی نیز دارد و امیدوارم مورد استفاده قرار گیرد.
طبق معمول در ابتدایی ترین مرحله ، نمونه نهایی این اسلاید شو را در اینجا ملاحظه نمائید و سپس فایلهای مربوط به این اسلاید شو را دانلود کنید.
در مرحله اول فایلهای js و css مربوط به این اسلاید شو را با استفاده از کدهای HTML زیر در صفحه وب خود قرار می دهیم.قبل از انجام این کار به آدرس دهی ها بسیار دقت کنید و آدرس فایلها را به طور صحیح در کد HTML وارد نمائید.
1 | <script type="text/javascript" src="js/jquery-1.3.js"></script> |
2 | <script type="text/javascript"src="js/jquery.cycle.all.js"></script> |
1<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />پس از قرار دادن لینک فایلهای مورد نیاز در قسمت head صفحه وب نوبت به فراخوانی تابع جاوااسکریپت jquery.cycle.all.js در صفحه وب میرسد که توسط کد زیر انجام می گیرد.
1 | <script type="text/javascript"> |
2 | $(document).ready(function(){ |
3 | $('#myslides').cycle({ |
4 | fx: 'fade', |
5 | speed: 5000, |
6 | timeout: 2000 |
7 | }); |
8 | }); |
9 | </script> |
1 | <body> |
2 | <div id="myslides"> |
3 | <img src="images/capitol.jpg" /> |
4 | <img src="images/flowers.jpg" /> |
5 | <img src="images/countryscene.jpg" /> |
6 | </div> |
7 | </body> |
بالا از id=”myslides” استفاده شده است. این تابع هر تعداد تگ <img/> را که در بین تگ
با id=”myslides” قرار دارد را اسلاید می کند.
برای تجربه افکت های مختلف می توانید در script فراخوانی تابع در قسمت fx: ‘fade’, از افکت های مختلف دیگر استفاده کنید.
در زیر لیست تعدادی ز این افکت ها را ملاحظه می فرمائید. فقط کافیست که عبارت افکت مورد نظر را به جای fade در مثال بگذارید و افکت جدید را تجربه کنبد. همچینین در این تابع می توانید سرعت وزمان توقف اسلاید ها را نیز تعیین نما یئید. واحد اعداد میلی ثانیه است به این معنی که هر ۱۰۰۰ میلی ثانیه معادل یک ثانیه است.
