<%@ Page Title="" Language="C#" MasterPageFile="~/mstr1.Master" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="CarGallery.Default2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphMain" runat="server">
    <!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 id="Head1">
    <title></title>
    
    <style type="text/css">
        #slideshow #slideshowWindow {
	width:512px;
	height:384px;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
        }

    #slideshow #slideshowWindow .slide {
	margin:0;
	padding:0;
	width:512px;
	height:384px;
	float:left;
	position:relative;
        }
   </style>

    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var currentPosition = 0;
            var slideWidth = 512;
            var slides = $('.slide');
            var numberOfSlides = slides.length;
            var slideShowInterval;
            var speed = 3000;


            slideShowInterval = setInterval(changePosition, speed);

            slides.wrapAll('<div id="slidesHolder"></div>')

            slides.css({ 'float': 'left' });

            $('#slidesHolder').css('width', slideWidth * numberOfSlides);


            function changePosition() {
                if (currentPosition == numberOfSlides - 1) {
                    currentPosition = 0;
                } else {
                    currentPosition++;
                }
                moveSlide();
            }


            function moveSlide() {
                $('#slidesHolder')
				  .animate({ 'marginLeft': slideWidth * (-currentPosition) });
            }

        });

    </script>

</head>
<body>
    <div id="slideshow">
    <div id="slideshowWindow">
    
        <div class="slide">
            <img src="photos/2.jpg" alt="image is here"/>
        </div><!--/slide-->
        
        <div class="slide">
            <img src="photos/1.jpg" alt="image is here"/>
        </div><!--/slide-->
        
        <div class="slide">
            <img src="photos/3.jpg" alt="image is here"/>
        </div><!--/slide-->
        
    </div><!--/slideshowWindow-->
</div><!--/slideshow-->

    
</body>
</html>
</asp:Content>
