Post
Ask Question

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

img1.gif

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

img2.gif

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

Code :

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>App2</title>

</head>

 <body onload="javascript:slide();" style="background-color:#fff">

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

     <br />

     <br />

     <img id="myimage" src=" NewImages/pic1.jpg" width="500" height="400" />

     <br />

     <input type="text" value="Image1" id="txt" style="font-weight:bolder" />

 </body>

</html>

 

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

Code :

   

 <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

 

    <!-- App2 references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>

    <script type="text/javascript" >

        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:


img3.gif

img4.gif


Similar Articles