ساخت یک اسلاید شو بدون کتابخانه

[mehraboOon]

ساخت یک اسلاید شو بدون کتابخانه




این مقاله به ساخت یک اسلاید‌شو می پردازد البته شما را از دنیای جاوااسکریپت آن جدا می‌سازیم تا فقط یک کدی باشد که می‌توانید به عنوان اسلاید‌شو در وب سایت های خودتان استفاده نمایید .

 01<div class="eq_slideshow">
02            <div class="parent_sliding">
03                <ul id="eqSliding" class="eqAutoSliding">
04                    <li>
05                        <img src="01.jpg" alt="img1" />
06                    </li>
07                    <li>
08                        <img src="02.jpg" alt="img1" />
09                    </li>
10                    <li>
11                        <img src="03.jpg" alt="img1" />
12                    </li>
13                    <li>
14                        <img src="04.jpg" alt="img1" />
15                    </li>
16                </ul>
17            </div>
18            <a id="eq-next" class="eq-next" href="javascript:void(0)"></a>
19            <a id="eq-play" class="eq-pause" href="javascript:void(0)"></a>
20            <a id="eq-prev" class="eq-prev" href="javascript:void(0)"></a>
21        </div>

نام تمامی کلاس ها را می توان تغییر داد به شرطی که در css هم اعمال شود تنها id=”eqSliding” باید ثابت باشد.
داخل عنصر li میتوانید عکس متن و یا ترکیبی از عناصر گوناگون را داشته باشید.

 01<style type="text/css">
02    body
03    {
04        background-color: #fff;
05        direction: rtl;
06    }
07    .eq_slideshow  /* main div contain all elements */
08    {
09        width: 700px; /*equal width li */
10        height: 345px;
11        margin: 0 auto;
12    }
13    .parent_sliding
14    {
15        width: 700px; /*equal width li */
16        height: 300px; /*equal height li */
17        position: relative;
18        overflow: hidden;
19        border-bottom: solid 2px #9bc250;
20    }
21    .eqAutoSliding
22    {
23        position: absolute;
24        top: 0;
25        left: 0;
26        height: 300px;
27        padding:0;
28        margin:0;
29        list-style-type:none;
30    }
31    .eqAutoSliding li
32    {
33        height: 300px; /*equal height parent_sliding */
34        width: 700px; /*equal width parent_sliding */
35        float: left;
36        overflow:hidden;
37    }
38    .eqAutoSliding li img
39    {
40        height: 300px;
41        width: 700px;
42    }
43    a.eq-next, a.eq-play, a.eq-pause, a.eq-prev
44    {
45        margin: 10px 10px 0 0;
46        height: 25px;
47        width: 25px;
48        display: block;
49        float: right;
50        background-image: url(  'play_pause.gif' );
51    }
52    a.eq-next
53    {
54        background-position: -50px 0;
55    }
56    a.eq-next:hover
57    {
58        background-position: -50px -25px;
59    }
60    a.eq-prev
61    {
62        background-position: -75px 0;
63    }
64    a.eq-prev:hover
65    {
66        background-position: -75px -25px;
67    }
68    a.eq-play
69    {
70        background-position: -25px 0;
71    }
72    a.eq-play:hover
73    {
74        background-position: -25px -25px;
75    }
76    a.eq-pause
77    {
78        background-position: 0 0;
79    }
80    a.eq-pause:hover
81    {
82        background-position: 0 -25px;
83    }
84</style>

درج تصویر زیر در جایی که با css آدر س می دهید

و لینک جاوا اسکریپت زیر در تگ HEAD:

 1<script src="slidshow.js" type="text/javascript"></script

>


در جاوااسکریپت می توانید زمان تعویض اسلایها را به میلی ثانیه با متغیر timer تعیین نمایید و همچنین می توانید رویدادهای احتمالی آنلود دیگری تعریف نمایید. اگر در این اسلاید شو ایرادی دیدید بسیار خوشحال خواهم شد که در بخش کامنت ها عنوان نمایید و به یاد داشته باشید jquery وتمام کتابخانه ها هم از جاوااسکریپت هستند پس از خلق آن ها هراسی نداشته باشید.