Window phone Slideshow

by Prasad

HTML

<div class="divBox">
	<ul>    	
    	<li class="activeLi"><img src="images/car1.jpg"></li>
        <li><img src="images/car2.jpg"></li>
        <li><img src="images/car3.jpg"></li>
        <li><img src="images/car4.jpg"></li>
        <li><img src="images/car5.jpg"></li>
    </ul>
</div>

CSS

@charset "utf-8";
/* CSS Document */

.divBox {
	width:200px;
	height:auto;
	overflow:hidden;
	display:block;
}
.divBox ul{
	padding:0px;
	margin:0px;
}
.divBox ul li {
	list-style:none;
	display:none;
}
.divBox ul li.activeLi {
	display:block;
	width:200px;
	height:150px;	
	animation:slideAnimationFlipV 2s;
}
@keyframes slideAnimationY {
	from {
		transform:translateY(200px);
		opacity:.1;
	}
	to {
		transform:translateY(0px);
		opacity:1;
	}
}
@keyframes slideAnimationX {
	from {
		transform:translateX(200px);
		opacity:.1;
	}
	to {
		transform:translateX(0px);
		opacity:1;
	}
}
@keyframes slideAnimationTop {
	from {
		transform:translateY(-200px);
		opacity:.1;
	}
	to {
		transform:translateY(0px);
		opacity:1;
	}
}
@keyframes slideAnimationRight {
	from {
		transform:translateX(-200px);
		opacity:.1;
	}
	to {
		transform:translateX(0px);
		opacity:1;
	}
}
@keyframes slideAnimationFlip {
	from {
		transform:rotateY(180deg);
		opacity:.1;
	}
	to {
		
		opacity:1;
	}
}
@keyframes slideAnimationFlipV {
	from {
		transform:rotateX(180deg);
		opacity:.1;
	}
	to {
		
		opacity:1;
	}
}

JavaScript

// JavaScript Document
var slideIndex=aniStyleLen=aniIndex=aniLen=0;
var ulLength=0;
var animateStylesArray= arrayNew= [];
var animateStylesArrayR= [];

$(document).ready(function(){ 	
	var arr= [];
	$.ajax({
		type: 'post',
		url: 'xml/animationstyles.xml',
		datatype: 'xml',
		success: function (xml) {
			$(xml).find('AnimateStyle').each(function(){
				var aniName=$(this).find('AnimationName').text();
				if(aniName == '') {
				}
				else {
					arr.push(aniName);
				}								
			});				
			console.log(arr)	;
			changeAniStyle(arr);	//Passed successed data to function changeAniStyle
		},
		error:function(){
			console.log('Failed to Load Animation Styles File, Try Again');
		}		
	});		
	slideIndex=changeImg(slideIndex); // at page load, load first slide and increment slide index
	slideIndex++;
	setInterval(function(){
		slideIndex=changeImg(slideIndex);
	},2000);
	ulLength=$('.divBox ul li').length;		
})

function changeImg(slideIndex) {		
		var preIndex=slideIndex-1;		
		var con=$('.divBox ul li').eq(slideIndex).html();		
		getAniStyle(aniIndex);		
		console.log('$(.activeLi).css({animation:  '+arrayNew[aniIndex] + ' 2s});');
		/*console.log('slideIndex :'+slideIndex + " , ulLength :"+ulLength + " : "+con);	*/		
		if(slideIndex >= ulLength) {
			$('.divBox ul li').eq(slideIndex).addClass('activeLi');
			$('.activeLi').css( 'animation',  arrayNew[aniIndex] + ' 2s');
			slideIndex = 0;			
		}		
		else {			
			$('.divBox ul li').eq(slideIndex).addClass('activeLi');
			$('.activeLi').css( 'animation',  arrayNew[aniIndex] + ' 2s');
			$('.divBox ul li').eq(preIndex).removeClass('activeLi');
			slideIndex++;
		}
		aniIndex++;
		return slideIndex;
}
function getAniStyle() {	
	if(aniIndex >= aniLen) {
		aniIndex =0;
	}
	else {
		aniIndex++;
	}	
	
}
function changeAniStyle(animateStylesArray) {
	aniLen=animateStylesArray.length;	
	arrayNew=animateStylesArray;
	
}