Ajax reading file

by Prasad

HTML

<div class="flexslider">
  <ul class="slides">
  </ul>
</div>

CSS

.textContent {
	width:auto;
	height:auto;
	border:1px dotted red;
	color:#333;
	padding:5px 10px;
}
.textContent ul li {
	list-style:none;
}
ul.slides li {
	list-style:none;
	display:inline-block;
}
ul.slides li img {
	width:200px;
	height:200px;
}
ul.slides li {
	display:none;
}
ul.slides li.activeLI {
	display:block;
}
ul.slides li.activeLI img {
	box-shadow:0 0 15px red;
}

JavaScript

$(document).ready(function(){	
$.ajax({
			type:'post',
			url:'BookList.xml',
			datatype:'xml',
			success:function(xml){
					$(xml).find('Imagesrc').each(function(){
			      var path = $(this).find('path').text();
				  if(path=='')	  
				  {
				  }
				  else{
				  var description = $(this).find('description').text();			      
				  setImgSrc(path);	
				  }		 
	    		});
			 $('.textContent').css('display','block');
			 var len=$('.slides li').length;
			 $("<li></li>").html(len+' ').appendTo(".textContent ul");
			 console.log(len);
			 updateImages(len);
			},
		   error: function() {
				alert("An error occurred while processing XML file.");
		   }
		});
	
	function updateImages(len)
	{
		var j=i=0;
		console.log("j :"+j+" i :"+i)
		len--;
		setInterval(function(){						
		if(j==0)
		{
			i=len;			
			$("ul.slides li:first-child").attr('class','activeLI');
			$("ul.slides li:first-child").css('display','block');	
			$("ul.slides li").eq(len).css('display','none');
			j++;
		}
		else if(j<=len)
		{
			i=j-1;
			$("ul.slides li").eq(j).attr('class','activeLI');			
			$("ul.slides li").eq(j).css('display','block');	
			$("ul.slides li").eq(i).attr('class','');
			$("ul.slides li").eq(i).css('display','none');	
			console.log("i:"+i);
			j++;			
		}
		else if(j>=len)
		{	
			j=0;		
			$("ul.slides li:first-child").attr('class','activeLI');
			$("ul.slides li:first-child").css('display','block');	
			$("ul.slides li").eq(len).css('display','none');
			j++;			
		}		
	},1000);
	}		
	function setImgSrc(path)
	{
		 $("<li><img src=''></li>").appendTo("ul.slides");
		 $('ul.slides li:last-child').find('img').attr('src', path);
	}
})