آموزش ساخت اسلایدشو به کمک 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/
.jpg){kind=small}
.jpg){kind=small}
.jpg){kind=small}
