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

[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 وتمام کتابخانه ها هم از جاوااسکریپت هستند پس از خلق آن ها هراسی نداشته باشید.

[mehraboOon]

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

دموی نهایی

هدف من فقط ارائه یک اسلاید شو برای استفاده در وب سایت ها نیست زیرا اسلاید شو های متفاوتی در وب وجود دارند که استفاده از آنها هم ساده است و هم به تشریح آموزش داده شده است . بلکه هدف بنده از ارائه این مقاله و مقاله گذشته اشاره به این نکته است که ما میتوانیم تولید کننده باشیم تا صرفا یک مصرف کننده .
همان طوری که در مقاله گذشته هم توضح دادم استفاده یا عدم استفاده از یک کتابخانه جاوا اسکریپت به تصمیم شما بستگی دارد و به شرایط وب سایت شما . بنده برای آموزش از کتابخانه های موجود مانند jquery استفاده نکردم و صرفا” از جاوا سکریپت برای ساخت این اسلاید شو بهره برده ام .
و حالا اسلاید شو !
HTML :

 01<ul id="fade-banner" class="project">
02        <li>
03            <img src="1.jpg" alt="نام پروژه" />
04            <h3>
05                نام پروژه</h3>
06        </li>
07        <li>
08            <img src="2.jpg" alt="نام پروژه۲" />
09            <h3>
10                نام پروژه۲</h3>
11        </li>
12        <li>
13            <img src="3.jpg" alt="نام پروژه۳" />
14            <h3>
15                نام پروژه۳</h3>
16        </li>
17 </ul>

ul درواقع نگه دارنده اسلاید شو است و هر قسمت از اسلاید شو در li قرار می گیرد و در هر li میتواند عکس متن و یا ترکیبی از آن ها باشد. این قابلیت اسلاید شو است که میتواند شامل تصویر و یا متن و یا ترکیبی از آن باشد که نحوه قرار گیری آن ها باید با css تعریف شود.
نکته : وجود id در تگ ul لازم است زیرا جاوا اسکرپیت از آن استفاده میکند
1<div class="numeric" id="numeric">
2</div>


این تگی است که شماره های اسلاید شو در آن قرار میگیرد ، این شماره ها به طور داینامیک به تعداد li های موجود در ul بالایی پر خواهد شد . این تگ را هم می توانید با دادن استایل های متفاوت با ظاهر متفاوت و در جاهای متفاوتی قرار دهید .
نکته : وجود id در تگ div لازم است زیرا جاوا اسکرپیت از آن استفاده میکند
Css :

 01.project
02        {
03            margin: 23px auto 15px;
04            width: 250px;
05            position: relative;
06            height: 320px;
07            text-align: center;
08            font-family: Tahoma;
09        }
10        .project li
11        {
12            width: 250px;
13            position: absolute;
14            height: 320px; /*equal with ul*/
15            top: 0;
16            right: 0;
17            background-color: #e8e8e8;
18        }
19        .project li img
20        {
21            width: 250px;
22            height: 160px;
23        }
24        .project li h3
25        {
26            font-size: 15px;
27            margin: 12px 0;
28        }
29        .project li p
30        {
31            padding: 0 15px;
32            line-height: 180%;
33        }
34        .numeric
35        {
36            direction: ltr;
37            text-align: center;
38            margin-bottom: 15px;
39            font-size: 1.1em;
40            padding: 5px 0;
41        }
42        .numeric li
43        {
44            display: inline-block;
45            margin: 0 3px;
46            padding: 1px 5px;
47            background-color: #ededed;
48            border: 1px solid #ccc;
49            cursor: pointer;
50            zoom: 1;
51            display: inline;
52            -moz-border-radius: 3px;
53            -webkit-border-radius: 3px;
54            border-radius: 3px;
55            -moz-box-shadow: 1px 1px 1px #492b2b;
56            -webkit-box-shadow: 1px 1px 1px #492b2b;
57            box-shadow: 1px 1px 1px #492b2b;
58        }
59        .numeric li.current
60        {
61            background-color: #000;
62            color: #fff;
63            cursor: text;
64            border: 1px solid #000;
65        }

این استایل را می تواند برای خودتان خصوصی کنید یعنی اندازه ها و رنگ ها و بقیه موارد کاملا قابل تغییر می باشد . به طور مثال من عرض کمی انتخاب کردم ولی شما می توانید بدون متن و با عرض ۹۷۰ پیکسل برای بنر خود استفاده کنید .
Javascript :

 01window.onload = function() {
02            slideshow();
03        };
04 
05        function $1(id) {
06            return document.getElementById(id);
07        }
08        function $2(tName, id) {
09            return document.getElementById(id).getElementsByTagName(tName);
10        }
11        function $3(tName) {
12            return document.getElementsByTagName(tName);
13        }
14 
15        //slidshow
16        var myLi, myNumDiv, myNumUl, myNumLi, curElement, nextElement, slideShow, opcval, opcval2, ff;
17        opcval = 1;
18        opcval2 = 0;
19        function slideshow() {
20            myLi = $2('li', 'fade-banner');
21            myNumDiv = $1('numeric');
22 
23            myNumUl = document.createElement('ul');
24            myNumDiv.appendChild(myNumUl);
25 
26            for (i = 0; i < myLi.length; i++) {
27                myNumUl.innerHTML += "<li>" + (i + 1) + "</li>";
28            }
29 
30            myNumLi = $2('li', 'numeric');
31 
32            myNumLi[0].className = "current";
33 
34            for (i = 0; i < myNumLi.length; i++) {
35                myNumLi[i].onclick = new Function("decision('" + i + "')");
36            }
37 
38            curElement = Number(myLi.length - 1);
39            nextElement = Number(myLi.length - 2);
40            for (i = 0; i < myLi.length - 1; i++) {
41                opac(myLi[i], 0);
42                myLi[i].style.zIndex = "1";
43            }
44            opac(myLi[myLi.length - 1], 1);
45            myLi[myLi.length - 1].style.zIndex = "2";
46 
47            slideShow = setInterval('fade()', 5000);
48        }
49        function fade() {
50 
51            myNumLi[((myLi.length - 1) - curElement)].className = "";
52            myNumLi[((myLi.length - 1) - nextElement)].className = "current";
53 
54            var c = setInterval(function() {
55                gonextimage();
56                if (opcval <= 0) {
57                    fixedposition();
58                    clearInterval(c);
59                    if (curElement == 0) { curElement = myLi.length - 1; } else { curElement = curElement - 1; }
60                    if (nextElement == 0) { nextElement = myLi.length - 1; } else { nextElement = nextElement - 1; }
61                }
62            }, 20);
63        }
64        function decision(i) {
65            if (opcval == 1 && ((myLi.length - 1) - i) != curElement) {
66                clearInterval(slideShow);
67                nextElement = (myLi.length - 1) - i;
68                myNumLi[((myLi.length - 1) - curElement)].className = "";
69                myNumLi[i].className = "current";
70                ff = setInterval(function() {
71                    gonextimage();
72                    if (opcval <= 0) {
73                        fixedposition();
74                        clearInterval(ff);
75                        curElement = nextElement;
76                    }
77                }, 20);
78            }
79        }
80        function gonextimage() {
81            opac(myLi[curElement], opcval);
82            opac(myLi[nextElement], opcval2);
83            opcval = opcval - 0.05;
84            opcval2 = opcval2 + 0.05;
85        }
86        function fixedposition() {
87            opac(myLi[curElement], 0);
88            myLi[curElement].style.zIndex = "1";
89            opac(myLi[nextElement], 1);
90            myLi[nextElement].style.zIndex = "2";
91            opcval = 1;
92            opcval2 = 0;
93        }
94        function opac(obj, value) {
95            obj.style.opacity = value;
96            obj.style.MozOpacity = value;
97            obj.style.KhtmlOpacity = value;
98            obj.style.filter = "alpha(opacity=" + (value * 100) + ")";
99        }

شاید یادگیری این جا وا اسکریپت کمی مشکل باشد ولی نکته ی مهم این است که باید دقت کنید که تابع slideshow() می بایست پس از لود سایت (onload) یا هر رویداد که بتواند آن را فراخوانی کند بیاید. ما در این جا گفتیم اسلاید شو پس از لود صفحه فراخوانی شود

 1window.onload = function() {
2            slideshow();
3        };

دقت کنید که window.onload تنها یکبار قابل استفاده است مگر در شرایط خاص که با جاوا اسکریپت این رویداد را مدیریت کنیم . پس دقت کنید ۲ تا window.onload در صفحه نداشته باشید و اگر توابع دیگری درید که باید زمان لود فراخوانی شوند از روش زیر استفاده کنید :

 1window.onload = function() {
2            تابع ۱();
3            تابع ۲();
4            تابع ۳();
5        };

از آن جایی که این کد با ایده شخصی ساخته شده است ممکن است باب میل همه نباشد ولی حتما در جای خود می تواند کاربردی باشد .