Simple Ad Slider in JQuery

A couple of days ago I was asked if there is a way to achieve flash like ad slider in JQuery without much of Javascripting. The immediate answer is “Yes”. JQuery is extremely fun and is very powerful. In this short post, I’ll explain the small amount of Javascript required to create an Ad Slider. We’ll only be using Basic HTML, CSS and JQuery. You can download JQuery from http://docs.jquery.com/Downloading_jQuery. Additional documentation can be found at http://docs.jquery.com/Main_Page.

http://www.cakeeditonline.info/samples/2010/02/adslider/

I have provided the code for this below. To get a detailed understanding, just go through those few comments in the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <style type="text/css">
    #AdOuterWrapper /* Outer static wrapper the Ads are displayed in */
    {
        border:1px solid #000000;
        margin:25px;
        position:relative;
        text-align:left;
        overflow:hidden; /* Remove/Comment this line to see how this is working */
    }
    #AdMoveFrame /* Expandable, Moveable frame that contains a horizontal array of ads */
    {
        position:absolute;
        text-align:left;
    }
    #AdButtonFrame
    {
        position:relative;
        z-index:9999;
    }
    #AdPrev, #AdNext /* General button style */
    {
        width:25px;
        height:25px;
        background:#ffffff;
        margin:10px;
    }
    #AdPrev:hover, #AdNext:hover /* General button hover style */
    {
        background:#999999;
        cursor:pointer;
    }
    #AdPrev /* Button left */
    {
        float:left;

    }
    #AdNext /* Button right */
    {
        float:right;
    }
    .AdFrame /* An individual Ad frame */
    {
        float:left;
        overflow:hidden;
    }
    </style>
    <script type="text/javascript" language="javascript" src="jquery.min.js"></script>
    <script type="text/javascript" language="javascript">

        var _AdHeight = 300;     // Set the height of your ad
        var _AdWidth = 300;     // Set the width of your ad

        var _AdNum = 0;
        var _AdCurPos = 0;
        $(function ()
        {
            // Position the ads
            $(".AdFrame").each(function ()
            {
                $(this).css('width', _AdWidth).css('height', _AdHeight);
                _AdNum++;
            });
            $("#AdOuterWrapper").css('width', _AdWidth).css('height', _AdHeight);
            $("#AdMoveFrame").css('width', parseInt(_AdNum * _AdWidth) + 1);
            __AdButtonControl ();

            $("#AdNext").click(function () // Move left
            {
                _AdCurPos -= _AdWidth;
                $('#AdMoveFrame').animate({ left : _AdCurPos }, 500, 'linear');
                __AdButtonControl ();
            });
            $("#AdPrev").click(function () // Move right
            {
                _AdCurPos += _AdWidth;
                $('#AdMoveFrame').animate({ left : _AdCurPos }, 500, 'linear');
                __AdButtonControl ();
            });
        });
        function __AdButtonControl () // Checks the current position and hides the corresponding button
        {
            if (_AdCurPos == 0) $("#AdPrev").css('display', 'none'); else $("#AdPrev").css('display', 'block');
            if (_AdCurPos == (1 - _AdNum) * _AdWidth) $("#AdNext").css('display', 'none'); else $("#AdNext").css('display', 'block');
        }
    </script>
</head>
<body>
    <center>

    <!-- This is the outer div -->
    <div id="AdOuterWrapper">
    <div id="AdMoveFrame">

        <!-- Replace the contents of each of this DIV with you AD -->
        <!-- To change the Width and Height, set it in the JS above. Remove the style attribute for the divs and the h1 tags -->
        <div class="AdFrame" style="background-color:#c0ffee">

            <!-- Your ad content goes here -->
            <h1>One</h1>

        </div>
        <div class="AdFrame" style="background-color:#FF0000">

            <h1>Two</h1>

        </div>
        <div class="AdFrame" style="background-color:#00FF00">

            <h1>Three</h1>

        </div>
        <div class="AdFrame" style="background-color:#0000FF">

            <h1>Four</h1>

        </div>
    </div>
    <div id="AdButtonFrame">
        <a id="AdPrev">&lt;</a>
        <a id="AdNext">&gt;</a>
    </div>
    </div>

    <br>

</body>
</html>