آموزش ساخت اسلایدشو به کمک JQuery

آموزش ساخت اسلایدشو به کمک JQuery
در این آموزش با مراحل ساخت یک اسلایدشو به کمک JQuery در خدمت شما عزیزان هستم . موتور اصلی این اسلاید شو پلاگین JQuery Cycle است که من به کمک آن یک اسلایدشو ساده با دکمه های کنترل به شما آموزش می دهم . پس در ادامه با مراحل آموزش با بنده همراه باشید
پیش نمایش :
۱٫ عکس زمینه
۲٫ دکمه های کنترل
۳٫ چند عکس برای اسلاید کردن
HTML :
در مرحل اول به یک سند HTML برای شروع کار نیاز داریم. بعد از ساختن صفحه ، به یک بلوک اصلی برای قرار دان اسلایدشو نیاز داریم . پس کد زیر رو به قسمت صفحه ساخته شده اضافه کنید.
1 |
< div id = "slideshowContainer" > |
2 |
3 |
</ div > |
در مرحله بعد باید یک بلوک دیگه برای اضافه کردن عکس ها به اون بلوک که در مرحله قبل ساختیم اضافه کنیم . کدهای زیر را اضافه کنید :
2 |
< img src = "images/image1.png" alt = "" width = "600" height = "300" /> |
3 |
< img src = "images/image2.png" alt = "" width = "600" height = "300" /> |
4 |
< img src = "images/image3.png" alt = "" width = "600" height = "300" /> |
5 |
< img src = "images/image4.png" alt = "" width = "600" height = "300" /> |
6 |
< img src = "images/image5.png" alt = "" width = "600" height = "300" /> |
7 |
</ div > |
پس تا اینجا باید کدهای شما مثل این باشه :
2 |
< div class = "slideshow" > |
3 |
< img src = "images/image1.png" alt = "" width = "600" height = "300" /> |
4 |
< img src = "images/image2.png" alt = "" width = "600" height = "300" /> |
5 |
< img src = "images/image3.png" alt = "" width = "600" height = "300" /> |
6 |
< img src = "images/image4.png" alt = "" width = "600" height = "300" /> |
7 |
< img src = "images/image5.png" alt = "" width = "600" height = "300" /> |
8 |
</ div > |
9 |
</ div > |
خوب ، تو این مرحله باید دکمه های کنترلی رو اضافه کنیم . مثل کدهای زیر :
02 |
< div class = "slideshow" > |
03 |
< img src = "images/image1.png" alt = "" width = "600" height = "300" /> |
04 |
< img src = "images/image2.png" alt = "" width = "600" height = "300" /> |
05 |
< img src = "images/image3.png" alt = "" width = "600" height = "300" /> |
06 |
< img src = "images/image4.png" alt = "" width = "600" height = "300" /> |
07 |
< img src = "images/image5.png" alt = "" width = "600" height = "300" /> |
08 |
</ div > |
09 |
< ul id = "nav" > |
10 |
< li id = "prev" >< a href = "#" >Previous</ a ></ li > |
11 |
< li id = "next" >< a href = "#" >Next</ a ></ li > |
12 |
</ ul > |
13 |
</ div > |
JQuery :
خوب ، توی این مرحله نوبت میرسه به اضافه کردن جی کوئری . بدون اضافه کردن این قسمت فقط یه صفحه دارید که ۵ تا عکس به صورت ساده قرار گرفته.
پس کدهای زیر رو به قسمت Head صفحه اضافه کنید :
2 |
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" ></script> |
3 |
<!-- include Cycle plugin --> |
4 |
<script type= "text/javascript" src= "http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" ></script> |
حالا برای اسلاید کردن تصاویر باید پلاگینی که نصب کردیم رو فراخوانی کنیم . کدهای زیر رو به قسمت Head پایین کدهای مرحله قبل اضافه کنید :
02 |
$(document).ready(function() { |
03 |
$('.slideshow').cycle({ |
04 |
fx: 'fade', |
05 |
pause: 1, |
06 |
prev: '#prev', |
07 |
next: '#next' |
08 |
}); |
09 |
}); |
10 |
</ script > |
توی این بخش می تونید هر طوری که خودتون دوست دارید تغییرات ایجاد کنید . مثل افکت ، ترتیب ،عرض ، ارتفاع و …
می تونید همه تنظیمات رو اینجا ببینید
CSS – قالب بندی اسلایدشو :
قسمت آخر این آموزش استایل دادن به المان های اسلایدشو هست . می تونید از استایل استفاده شده در این آموزش استفاده کنید . ولی کلا می تونید اینجا سلیقه به خرج بدید و هر طور خودتون دوست دارید ویرایش کنید . پس این کدها رو به قسمت Head اضافه کنید .
02 |
* { |
03 |
margin : 0px ; |
04 |
padding : 0px ; |
05 |
border : 0px ; |
06 |
} |
07 |
body { |
08 |
background : url (images/background.jpg) repeat-x ; |
09 |
} |
10 |
11 |
#slideshowContainer { |
12 |
width : 632px ; |
13 |
margin : 100px auto 0 auto ; |
14 |
position : relative ; |
15 |
} |
16 |
.slideshow { |
17 |
height : 332px ; |
18 |
} |
19 |
.slideshow img { |
20 |
padding : 15px ; |
21 |
border : 1px solid #ccc ; |
22 |
background-color : #eee ; |
23 |
} |
24 |
#nav { |
25 |
list-style-type : none ; |
26 |
z-index : 150 ; |
27 |
} |
28 |
#nav li a { |
29 |
display : block ; |
30 |
width : 58px ; |
31 |
height : 102px ; |
32 |
text-indent : -9999px ; |
33 |
outline : none ; |
34 |
} |
35 |
#prev a { |
36 |
background : url (images/ left .png); |
37 |
width : 58px ; |
38 |
height : 102px ; |
39 |
position : absolute ; |
40 |
top : 120px ; |
41 |
left : -70px ; |
42 |
} |
43 |
#next a { |
44 |
background : url (images/ right .png); |
45 |
width : 58px ; |
46 |
height : 102px ; |
47 |
position : absolute ; |
48 |
top : 120px ; |
49 |
right : -70px ; |
50 |
} |
51 |
#next a:hover { |
52 |
background : url (images/right_over.png); |
53 |
} |
54 |
#prev a:hover { |
55 |
background : url (images/left_over.png); |
56 |
} |
57 |
</style> |
خب ، تموم شد ، اسلاید شو ما آماده است ، از این اسلاید شو می تونید جاهای مختلف استفاده کنید و لذت ببرید . موفق باشید
http://www.ittutorial.ir/