با سلام. در این مطلب آموزش کامل ساخت اسلایدشو به کمک جی کوئری JQuery رو براتون گذاشتم. در این آموزش با مراحل ساخت یک اسلایدشو به کمک JQuery به خوبی آشنا خواهید شد. موتور اصلی این اسلاید شو پلاگین JQuery Cycle است که خواهید توانست به کمک آن یک اسلایدشو ساده با دکمه های کنترل بسازید. ادامه آموزش در ادامه مطلب موجود می باشد.
جهت مشاهده آموزش کامل ساخت اسلایدشو به کمک جی کوئری JQuery به ادامه مطلب مراجعه نمایید.
HTML :
در مرحل اول به یک سند HTML برای شروع کار نیاز داریم. بعد از ساختن صفحه ، به یک بلوک اصلی برای قرار دان اسلایدشو نیاز داریم . پس کد زیر رو به قسمت صفحه ساخته شده اضافه کنید.
<div id="slideshowContainer"> </div>
در مرحله بعد باید یک بلوک دیگه برای اضافه کردن عکس ها به اون بلوک که در مرحله قبل ساختیم اضافه کنیم . کدهای زیر را اضافه کنید :
<div class="slideshow"> <img src="images/image1.png" alt="" width="600" height="300" /> <img src="images/image2.png" alt="" width="600" height="300" /> <img src="images/image3.png" alt="" width="600" height="300" /> <img src="images/image4.png" alt="" width="600" height="300" /> <img src="images/image5.png" alt="" width="600" height="300" /> </div>
پس تا اینجا باید کدهای شما مثل این باشه :
<div id="slideshowContainer"> <div class="slideshow"> <img src="images/image1.png" alt="" width="600" height="300" /> <img src="images/image2.png" alt="" width="600" height="300" /> <img src="images/image3.png" alt="" width="600" height="300" /> <img src="images/image4.png" alt="" width="600" height="300" /> <img src="images/image5.png" alt="" width="600" height="300" /> </div> </div>
خوب ، تو این مرحله باید دکمه های کنترلی رو اضافه کنیم . مثل کدهای زیر :
<div id="slideshowContainer"> <div class="slideshow"> <img src="images/image1.png" alt="" width="600" height="300" /> <img src="images/image2.png" alt="" width="600" height="300" /> <img src="images/image3.png" alt="" width="600" height="300" /> <img src="images/image4.png" alt="" width="600" height="300" /> <img src="images/image5.png" alt="" width="600" height="300" /> </div> <ul id="nav"> <li id="prev"><a href="#">Previous</a></li> <li id="next"><a href="#">Next</a></li> </ul> </div>
JQuery :
خوب ، توی این مرحله نوبت میرسه به اضافه کردن جی کوئری . بدون اضافه کردن این قسمت فقط یه صفحه دارید که ۵ تا عکس به صورت ساده قرار گرفته.
پس کدهای زیر رو به قسمت Head صفحه اضافه کنید :
<!-- include jQuery library --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="https://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
حالا برای اسلاید کردن تصاویر باید پلاگینی که نصب کردیم رو فراخوانی کنیم . کدهای زیر رو به قسمت Head پایین کدهای مرحله قبل اضافه کنید :
<script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade', pause: 1, prev: '#prev', next: '#next' }); }); </script>
توی این بخش می تونید هر طوری که خودتون دوست دارید تغییرات ایجاد کنید . مثل افکت ، ترتیب ،عرض ، ارتفاع و …
می تونید همه تنظیمات رو اینجا ببینید
CSS – قالب بندی اسلایدشو :
قسمت آخر این آموزش استایل دادن به المان های اسلایدشو هست . می تونید از استایل استفاده شده در این آموزش استفاده کنید . ولی کلا می تونید اینجا سلیقه به خرج بدید و هر طور خودتون دوست دارید ویرایش کنید . پس این کدها رو به قسمت Head اضافه کنید .
<style type="text/css"> * { margin:0px; padding:0px; border:0px; } body { background:url(images/background.jpg) repeat-x; } #slideshowContainer { width: 632px; margin: 100px auto 0 auto; position:relative; } .slideshow { height: 332px; } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } #nav { list-style-type:none; z-index:150; } #nav li a { display:block; width:58px; height:102px; text-indent:-9999px; outline:none; } #prev a { background:url(images/left.png); width:58px; height:102px; position:absolute; top:120px; left:-70px; } #next a { background:url(images/right.png); width:58px; height:102px; position:absolute; top:120px; right:-70px; } #next a:hover { background:url(images/right_over.png); } #prev a:hover { background:url(images/left_over.png); } </style>
عکس های اسلایدر رو هم میتونید از این لینک دانلود کنید.
برای تازه شدن دیر نیست.
موفق و پیروز باشید
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۶ شهریور ۱۳۹۳
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
سلام ، کدتون مشکل داره
سلام خسته نباشید
ظاهرا این کد مشکل داره
اصلا درست نیست
سلام. خسته نباشید. شرمنده کار نمی کنه فقط یه عکس رو ثابت نشون میده
سپاااااااااااااااس
نمیشه که
کل کارارو انجام دادم ولی نشد . عکسا پایین هم هستن چرا
بچه ها یه برنامه هست به نام wow slider این برنامه هم کار را بندازه.
سلام دوستان کدتون مشکل داره……
اینو هم بگم با ۵ تا مرورگر امتحان کردم ویندوزم ۷.
سلام و خسته نباشید مهندس
ببخشید من تازه برنامه نویسی وب شروع کردم
خواهش میکنم این سوالم پاسخ بدین
بنده این آموزش شما تا قسمت فایل jquery-1.11.1.min.js تمام و کمال انجام دادم و هیچ مشکلی نبود؛ اما وقتی خواستم تست کارو ببینم دیدم اصلا عکس اول رو نشون داده نمیشه و متعاقب اون اصلا اسلاید صورت نمیگیره.همین مشکل با یه آموزش اسلاید دیگه هم داشتم (((نمیدونم ولی احتمالا فایل jquery تو سیستم من اجرا نمیشه ولی دلیلشو نمیدونم))) بدبختی اینه که برای این مشکلم هیچ جای نت جوابی پیدا نکردم.
تمنا دارم کمک کنید.