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

          s.m.m 
            بازدید : 332
          1395/06/06
           نظرات (0)
        

در این آموزش با مراحل ساخت یک اسلایدشو به کمک 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/

برچسب ها اسلایدشو ,