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

چهارشنبه, ۲۸ام اردیبهشت , ۱۳۹۰ | ۲۶ دیدگاه

سلام و عرض ادب خدمت تمامی مشتاقان به یادگیری . طبق قولی که داده بودم و استقبال خوبی که درمقاله قبلی به نام ساخت یک اسلاید شو بدون کتابخانه شد که نمونه اش را می توانید در طراحی سایت خودم مشاهده بفرمایید ، سعی می کنم یک ماژول اسلاید شو دیگری که نوشته ی اینجانب (بهزاد علی بیگی) است را برای استفاده در وب سایت ها در این مقاله آموزش دهم .

دموی نهایی

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

HTML :

<ul id="fade-banner" class="project">
        <li>
            <img src="1.jpg" alt="نام پروژه" />
            <h3>
                نام پروژه</h3>
        </li>
        <li>
            <img src="2.jpg" alt="نام پروژه۲" />
            <h3>
                نام پروژه۲</h3>
        </li>
        <li>
            <img src="3.jpg" alt="نام پروژه۳" />
            <h3>
                نام پروژه۳</h3>
        </li>
 </ul>

ul درواقع نگه دارنده اسلاید شو است و هر قسمت از اسلاید شو در li قرار می گیرد و در هر li میتواند عکس متن و یا ترکیبی از آن ها باشد. این قابلیت اسلاید شو است که میتواند شامل تصویر و یا متن و یا ترکیبی از آن باشد که نحوه قرار گیری آن ها باید با css تعریف شود.
نکته : وجود id در تگ ul لازم است زیرا جاوا اسکرپیت از آن استفاده میکند


<div class="numeric" id="numeric">
</div>

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

Css :

.project
        {
            margin: 23px auto 15px;
            width: 250px;
            position: relative;
            height: 320px;
            text-align: center;
            font-family: Tahoma;
        }
        .project li
        {
            width: 250px;
            position: absolute;
            height: 320px; /*equal with ul*/
            top: 0;
            right: 0;
            background-color: #e8e8e8;
        }
        .project li img
        {
            width: 250px;
            height: 160px;
        }
        .project li h3
        {
            font-size: 15px;
            margin: 12px 0;
        }
        .project li p
        {
            padding: 0 15px;
            line-height: 180%;
        }
        .numeric
        {
            direction: ltr;
            text-align: center;
            margin-bottom: 15px;
            font-size: 1.1em;
            padding: 5px 0;
        }
        .numeric li
        {
            display: inline-block;
            margin: 0 3px;
            padding: 1px 5px;
            background-color: #ededed;
            border: 1px solid #ccc;
            cursor: pointer;
            zoom: 1;
            display: inline;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -moz-box-shadow: 1px 1px 1px #492b2b;
            -webkit-box-shadow: 1px 1px 1px #492b2b;
            box-shadow: 1px 1px 1px #492b2b;
        }
        .numeric li.current
        {
            background-color: #000;
            color: #fff;
            cursor: text;
            border: 1px solid #000;
        }

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

Javascript :


window.onload = function() {
            slideshow();
        };

        function $1(id) {
            return document.getElementById(id);
        }
        function $2(tName, id) {
            return document.getElementById(id).getElementsByTagName(tName);
        }
        function $3(tName) {
            return document.getElementsByTagName(tName);
        }



        //slidshow
        var myLi, myNumDiv, myNumUl, myNumLi, curElement, nextElement, slideShow, opcval, opcval2, ff;
        opcval = 1;
        opcval2 = 0;
        function slideshow() {
            myLi = $2('li', 'fade-banner');
            myNumDiv = $1('numeric');

            myNumUl = document.createElement('ul');
            myNumDiv.appendChild(myNumUl);

            for (i = 0; i < myLi.length; i++) {
                myNumUl.innerHTML += "<li>" + (i + 1) + "</li>";
            }

            myNumLi = $2('li', 'numeric');

            myNumLi[0].className = "current";

            for (i = 0; i < myNumLi.length; i++) {
                myNumLi[i].onclick = new Function("decision('" + i + "')");
            }

            curElement = Number(myLi.length - 1);
            nextElement = Number(myLi.length - 2);
            for (i = 0; i < myLi.length - 1; i++) {
                opac(myLi[i], 0);
                myLi[i].style.zIndex = "1";
            }
            opac(myLi[myLi.length - 1], 1);
            myLi[myLi.length - 1].style.zIndex = "2";

            slideShow = setInterval('fade()', 5000);
        }
        function fade() {

            myNumLi[((myLi.length - 1) - curElement)].className = "";
            myNumLi[((myLi.length - 1) - nextElement)].className = "current";

            var c = setInterval(function() {
                gonextimage();
                if (opcval <= 0) {
                    fixedposition();
                    clearInterval(c);
                    if (curElement == 0) { curElement = myLi.length - 1; } else { curElement = curElement - 1; }
                    if (nextElement == 0) { nextElement = myLi.length - 1; } else { nextElement = nextElement - 1; }
                }
            }, ۲۰);
        }
        function decision(i) {
            if (opcval == 1 && ((myLi.length - 1) - i) != curElement) {
                clearInterval(slideShow);
                nextElement = (myLi.length - 1) - i;
                myNumLi[((myLi.length - 1) - curElement)].className = "";
                myNumLi[i].className = "current";
                ff = setInterval(function() {
                    gonextimage();
                    if (opcval <= 0) {
                        fixedposition();
                        clearInterval(ff);
                        curElement = nextElement;
                    }
                }, ۲۰);
            }
        }
        function gonextimage() {
            opac(myLi[curElement], opcval);
            opac(myLi[nextElement], opcval2);
            opcval = opcval - 0.05;
            opcval2 = opcval2 + 0.05;
        }
        function fixedposition() {
            opac(myLi[curElement], 0);
            myLi[curElement].style.zIndex = "1";
            opac(myLi[nextElement], 1);
            myLi[nextElement].style.zIndex = "2";
            opcval = 1;
            opcval2 = 0;
        }
        function opac(obj, value) {
            obj.style.opacity = value;
            obj.style.MozOpacity = value;
            obj.style.KhtmlOpacity = value;
            obj.style.filter = "alpha(opacity=" + (value * 100) + ")";
        }

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


window.onload = function() {
            slideshow();
        };

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


window.onload = function() {
            تابع ۱();
            تابع ۲();
            تابع ۳();
        };

شخصا” از این اسلاید شو در بسیاری از وب سایت ها یی که طراحی کرده ام ، استفاده کردم مانند این سایت و یا طراحی سایت این سایت که با css ظاهر متفاوتی گرفته است .
از آن جایی که این کد با ایده شخصی ساخته شده است ممکن است باب میل همه نباشد ولی حتما در جای خود می تواند کاربردی باشد . به هر حال از تمامی دوستانی که می توانند در جهت بهبود این کد قدمی بردارند دعوت می کنم که نظرات و پیشنهادات خود را ارائه دهند .

Be Sociable, Share!


۲۶ دیدگاه


  1. فاطمه
    ۲۹ اردیبهشت ۱۳۹۰

    عالی بود مرسی




  2. Goback
    ۲۹ اردیبهشت ۱۳۹۰

    هو،
    سلام علیکم،

    مطلب قبلی و این نیاز بودن،خیلی هم کاربردی هستن.تشکر
    یا حــــق ج




  3. محمد
    ۲۹ اردیبهشت ۱۳۹۰

    سلام
    با تشکر از لطف شما
    کجای کد را تغییر بدم تا به صورت scroll نمایش داده شود.
    مانند این سایت http://www.mehrtrade.com/
    منتظر باسخ شما هستم




  4. Star
    ۲۹ اردیبهشت ۱۳۹۰

    عنوان این مطلب اشتباه هست !
    شما که از Library جاوا اسکریپت استفاده کردید ! پس بدون Library نیست !




  5. علی بیگی
    ۲۹ اردیبهشت ۱۳۹۰

    نه دوست عزیز
    کتابخانه های جاوا اسکریپت اسمشون روشه !
    مثل جی کوئری

    یک نگاه به این لیک ها بندازین
    http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/
    و
    http://javascriptlibraries.com/




  6. کامران
    ۳۰ اردیبهشت ۱۳۹۰

    خیلی جالب و مفید بود با تشکر از شما دوست عزیز




  7. Asghar
    ۳۱ اردیبهشت ۱۳۹۰

    من که از این کار و کار قبلی شما لذت بردم و از شما تشکر می کنم




  8. امیر عظمتی
    ۵ خرداد ۱۳۹۰

    سلام. خیلی جالب بو ود خیلی هم مفید.
    با اجازه تون من هم از این پس از این اسکریپت در سایت هایی که می سازم استفاده میکنم. مشکلی نداره که؟




  9. بهزاد علی بیگی
    ۷ خرداد ۱۳۹۰

    جناب آقای عظمتی مشکلی وجود ندارد .




  10. عی
    ۱۱ خرداد ۱۳۹۰

    مرسی




  11. نازنین
    ۶ مرداد ۱۳۹۰

    سلام
    وقتتون بخیر
    من دارم جی کوئری کار میکنم
    یه تیکه کد میخوام بنویسم که ازیک لیست مثلا نام یه استان روانتخاب می کنیم دریه لیستی که کنارلیست اولی هستش شهرهای استان انتخاب شده بیاد.
    کدرونوشتم
    برای نام استان ها وشهرها ازیه آرایه دوبعدی استفاده کردم.برای اینکه شهرهای هراستان روداشته باشم ازforاستفاده کردم ولی بازم کارنمیکنه ممنون میشم راهنمایی کنید




  12. shima
    ۱۶ شهریور ۱۳۹۰

    سلام
    وقت بخیر
    می بخشید من تازه دارم طراحی سایت یاد می گیرم به خاطر همین یه اشکال ضایع دارم و اون اینکه کدهای جاوا اسکریپت که در بالا گفتید رو باید تو کدوم قسمت بنویسیم ؟
    لطفا راهنماییم کنید
    مرسی




  13. بهزاد علی بیگی
    ۱۷ شهریور ۱۳۹۰

    @ نارنین :
    بحث گسترده ای است ولی نمونه اش را از وب سایت های غیر فارسی می تونید بدست بیارید.
    باید دید اسم شهرها و کشور ها در چه فرمتی است xml json ,…

    @شیما :
    تو هدر سایت یاهمان تگ head




  14. عبدالرضا جوافشاني
    ۲۱ شهریور ۱۳۹۰

    سلام دوست عزیز

    آقا از سایت بی نظیرت ممنون

    همیشه موفق و سلامت باشی دوست عزیز




  15. nahid
    ۳۰ شهریور ۱۳۹۰

    اول تشکر بخاطر پست عالی و مفیدتون . یه سوال داشتم ! وقتی
    رو کامنت میکنم دیگه کار نمیکنه!!!
    اگه نخوام شماره داشته باشه باید چیکار کنم؟؟؟؟
    اگه امکان داره بهم ایمیل بزنید . ممنون




  16. nahid
    ۳۰ شهریور ۱۳۹۰

    یه سوال دیگه؟
    این نقطه کنار عکس چجوری میره




  17. nahid
    ۳۰ شهریور ۱۳۹۰

    ابته این نقطه تو دموی خودتون نی!!!!




  18. علیرضا
    ۷ مهر ۱۳۹۰

    عالیه ، مرسی ، همیشه واسم ساخت این چنین چیزی سوال بود




  19. مسلم
    ۲۰ مهر ۱۳۹۰

    واقعا ممنون و دسمریزاد




  20. میثم
    ۱۲ آبان ۱۳۹۰

    سلام
    می خواستم بدونم که آیا میشه عکس ها رو از بانک اطلاعاتی خوند .
    کاری که شما کردین از بانک خوند ؟ یا عکس ثابتی هست
    اگه از بانک استفاده کنیم چه معایبی داره




  21. بهزاد علی بیگی
    ۳۰ آبان ۱۳۹۰

    @ناهید
    با کامنت هم کار می کنه
    اگر نخواهید شماره داشته باشد در اینجا

    + (i + 1) +
    داخل پرانتز یک کاراکتر و یا خالی بگزارید (‘ ‘)

    @میثم
    بله می توان به راحتی عکس ها را از بانک خوند




  22. محمد
    ۱۳ آذر ۱۳۹۰

    این کدها رو بعد ویرایش کجا باید کپی کرد ؟؟




  23. alma
    ۱۵ آذر ۱۳۹۰

    ممنون از آموزش کامل شما عالی بود




  24. پیمان
    ۱۸ دی ۱۳۹۰

    سلام… خیلی مفید و عالی نوشته شده
    ممنون و پیروز باشید




  25. سجاد
    ۱۹ دی ۱۳۹۰

    با سلام و خسته نباشید وبسایت بسیار جالب دارید من میخواستم بگم نمیشه مثل بقیه چیزا سورس ماملش رو واسه دانلود بزارید با تشکر



دیدگاه خود را بنویسید