# زبان های اسکریپتی > JavaScript و Framework های مبتنی بر آن >  آموزش اسلاید شو  با جاوا اسکریپت

## pantea92

می شه لطفا ایجاد اسلاید شو با جاوا اسکریپت رو برای من توضیح بدین یا یه منبع ساده به من معرفی کنید که من بفهمم من هر چی با xml عکسها رو گذاشتم و حتی اول فکر کردم ادرس دهیش غلطه بازم اجرا نشد
مرسی

----------


## Javidhb

این مختصر مفیده:

http://moderntime.ir/%D8%B3%D8%A7%D8...C%D9%BE%D8%AA/

----------


## pantea92

مرسی بابت لینک، اگه می تونین لطفا اموزشش رو با xml هم برام بذارین

----------


## Javidhb

یه نمونه:
- برای صحت داده ها از هیچ شرطی استفاده نشده (خودتون اضافه کنید)
- با توجه به ساختار xml خودتون بای کد رو تغییر بدید.
- بهتره (یه جورایی باید!) عکسها رو از قبل لود کنید تا همه چیز رون اجرا بشه(طبق لینک آموزش توی پست بالایی)

images.xml

<?xml version="1.0"?>
<main>
    <image>
        <name>img1</name>
        <src>img1.jpg</src>
    </image>
    <image>
        <name>img2</name>
        <src>img2.jpg</src>
    </image>
    <image>
        <name>img3</name>
        <src>img3.jpg</src>
    </image>
</main>


slide.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SlideShow</title>
</head>
<body>
<img src="img1.jpg" id="slide" width="100" height="56" />

<script>
    //شروع برنامه
    (function(){
        //1. خوندن xml
        var ourXML = readXml("images.xml") ;

        //2. read 'src' of images in the xml
        var imgSrcs = getImageSrc(ourXML);

        //3. درست کردن سلایدشو
        slideShow(imgSrcs);

    })();

    //برقراری ارتباط و خوندن فایل
    function readXml(filePath)
    {
        var _xml = new XMLHttpRequest();

        _xml.open("GET", filePath, false);
        _xml.setRequestHeader("Content-Type", "text/xml");//تنظیم هدر
        _xml.send(null);

        return _xml.responseXML;
    }

    //گرفتن src عکسها
    function getImageSrc(xml)
    {
        var images = xml.getElementsByTagName('image'); //تمام تگهای عکس توی فایل xml
        var numAllImages = images.length; //تعداد کل عکسها
        var imagesArray = new Array(); //برای ذخیر کردن سورس عکسها

        for(var i=0; i < numAllImages; i++)
        {
            //اضافه کردن سورس به آرایه
            imagesArray.push(images[i].getElementsByTagName('src')[0].childNodes[0].nodeValue); // امیدوارم یه راه کوتاهتر باش!
        }

        return imagesArray;
    }

    function slideShow(array)
    {
        var step = 0;
        var totalSildes = array.length;
        var slideImg = document.getElementById('slide');

        window.setInterval(function(){
            if(step == totalSildes) step = 0; // برگشتن به عکس اول

            slideImg.src = array[step];
            step++; //عکس بعدی

        }, 3000);//har 3 saniey ax avaz beshe
    }
</script>
</body>
</html>

----------


## pantea92

مرسی بابت توضیح کامل اسلاید شو فقط یه سوال داشتم اگه سورسش توی فولدر image باشه ../ باید بزنم دیگه؟
و اینکه از طریق getElemantBytagname هم اگه میدونین میشه برام توضیح بدین؟
مرسی

----------


## pantea92

یه سوال دیگه ، الان این عکسها رو شما فقط توی xml گذاشتین و توی اچ تی ام ال (body) نذاشتین؟

----------


## Javidhb

> مرسی بابت توضیح کامل اسلاید شو فقط یه سوال داشتم اگه سورسش توی فولدر image باشه ../ باید بزنم دیگه؟


بستگی داره این فولدر image و فایل Html کجاها باشن. اگه فولدر Image کنار html هست: 'image/img1.jpg'
اگه فولدر به level بالاتر از htmlه : image/img1.jpg/.. 




> و اینکه از طریق getElemantBytagname هم اگه میدونین میشه برام توضیح بدین؟


توی xml (و html) از tag برای نظم دادن به داده استفاده میشه... getElementBytagName هم کارش اینه که تمام تگهایی رو که توی پرانتز جلوش تعیین میکنید رو انتخاب کنه.





> الان این عکسها رو شما فقط توی xml گذاشتین و توی اچ تی ام ال (body) نذاشتین؟


منظورتون رو نفهمیدم!
*آدرس* عکس ها فقط توی xml هست... و توی html فقط یه تگ img برای نشون دادن عکس وجود داره و بصورت پیشفرض هم یه عکس رو نشون میده ( میتونید src رو پاک کنید که اونم نشون نده)...
و بعد با javascript مقدار src اون img رو تغییر میدیم (با سورس هایی که از xml استخراج شده)

----------


## pantea92

بله من تمام عکسهام رو فقط توی xml آدرسی کردم....مرسی از راهنماییتون

----------

