Javidhb
دوشنبه 22 مهر 1392, 13:35 عصر
یه نمونه:
- برای صحت داده ها از هیچ شرطی استفاده نشده (خودتون اضافه کنید)
- با توجه به ساختار 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>