JavaScript Image Rotator in ASP.NET

Sometimes, we need to rotate Images on ours web pages, it may be ads or some simple Images. In this article I am going to tell you that how to rotate an Image from a Group of Images using JavaScript in your ASP.NET Application. I hope you will enjoy this article as well as my demo project.

Free Download

JavaScript Image Rotator : Demo Project

Controls and Properties:

1. Image Control : id=”img”.

2. TextBox : id=”txtrotation”.

JavaScript Code:

<script language="JavaScript" type="text/javascript" >
        var xmlHttp
 var arr;
 function ChangeImage() {
            xmlHttp = GetXmlHttpObject()
            var url = "ImageRotatorControl.aspx"
            url = url + "?iname=" +

            document.getElementById('txtrotation').value
            xmlHttp.onreadystatechange = stateChanged
            xmlHttp.open("GET", url, true)
            xmlHttp.send(null)
            return false;
        }
 function stateChanged() {

            if (xmlHttp.readyState == 4 || 

 xmlHttp.readyState == "complete") {
                var str;
                str = xmlHttp.responseText;
                if (str == "1") {
                    document.getElementById("img").src = "tncompaq presario 12.jpg";
                    document.getElementById("txtrotation").value = "2";
                    setTimeout("ChangeImage()", 1000);
                }
 if (str == "2") {
                    document.getElementById("img").src = "tnaci concept.jpg";
                    setTimeout("ChangeImage()", 1000);
                    document.getElementById("txtrotation").value = "1";
                }

            }
 }
        function GetXmlHttpObject() {

            var objXMLHttp = null
            if (window.XMLHttpRequest) {
                objXMLHttp = new XMLHttpRequest()
            }
            else if (window.ActiveXObject) {
                objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
            }
            return objXMLHttp
        }

</script>

Page Source Code:

 <asp:Image ID=”img” runat=”server” Height=”200px” Width=”200px”

           ImageUrl="~/tncompaq presario 12.jpg" />
<asp:TextBox ID="txtrotation" runat="server"></asp:TextBox>

Aspx.cs Page Code to Rotate Images :

protected void Page_Load(object sender, EventArgs e)
 {
 if (Request.QueryString["iname"] != null)
 {
            string i = Request.QueryString["iname"].ToString();
            string str = "1";
            if (i == "2")
 {
 str = "2";
 }

            Response.Clear();
            Response.Write(str);
            Response.End();
        }
 }