Image Sliding Using JavaScript in Windows Store App

Introduction

Today we will create an image sliding function using JavaScript in a Metro Style Application. The sliding images action occurs automatically after a fixed duration of time. The JavaScript slide function is called at the time of loading the body of the HTML file. We can use both internal and external types of JavaScript files but here we will use a simple internal JavaScript file.

In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application.

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it.

Open Visual Studio 2012
File -> New -> Project
Choose Template -> JavaScript -> Metro Style Application
Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:

Step 3 : The Default.Html file is as in the following code:

Code :

<!DOCTYPE html>

<html>

<head>

</head>

<h2 style="font-weight:bold; color:#f00">Automatic Image Slideing</h2>

<br />

<br />

</body>

</html>

Step 4 : The JavaScript file is as in the following code:

Code :

var image1 = new Image()

image1.src = "NewImages/pic1.jpg"

var image2 = new Image()

image2.src = "NewImages/pic2.jpg"

var image3 = new Image()

image3.src = "NewImages/pic3.jpg"

var image4 = new Image()

image4.src = "NewImages/pic4.jpg"

var step = 1

function slide()

{

var slidepic = document.getElementById("myimage")

var num = document.getElementById("txt")

num.value="Image"+ step

slidepic.src = eval("image" + step + ".src")

if (step < 4)

step++

else

step = 1

var dTime = setTimeout("slide()", 3500);

}

</script>

Step 5 : After running this code the output looks like this: