جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
13
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : ittutorial.ir تعداد بازدید : ۳۸۷ تاریخ : دو شنبه, ۱۶تیرماه ۱۳۹۳
ساخت یک اسلاید شو بدون کتابخانه
امتیاز دهید
تعداد رای 0 امتیاز 0

بدون استفاده از کتابخانه jquery و با استفاده از javascript  می توانیم این اسلاید شو را بسازیم.

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 لازم است زیرا جاوا اسکرپیت از آن استفاده میکند

.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;
        }

این استایل را می تواند برای خودتان خصوصی کنید یعنی اندازه ها و رنگ ها و بقیه موارد کاملا قابل تغییر می باشد.

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; }
                }
            }, 20);
        }
        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;
                    }
                }, 20);
            }
        }
        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() {
            تابع ۱();
            تابع ۲();
            تابع ۳();
        };
comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه
تغییر اندازه تصاویر بوسیله php

تغییر اندازه تصاویر بوسیله php

   تعداد بازدید: ۴۲۸
خواندن ایمیل ها با php

خواندن ایمیل ها با php

   تعداد بازدید: ۳۷۳
CSS3 در Internet Explorer

CSS3 در Internet Explorer

   تعداد بازدید: ۶۰۹
قابلیت جدید گوگل reCaptcha(من ربات نیستم؟)

قابلیت جدید گوگل reCaptcha(من ربات نیستم؟)

   تعداد بازدید: ۲۹۱۱
بازی Snake(مار) با HTML5

بازی Snake(مار) با HTML5

   تعداد بازدید: ۳۸۲