Jquery Image Gallery

<script type="text/javascript" src="script/jquery.1.9.min.js"></script>
<script type="text/javascript">
    var imageList;
    var start = 0;
    var autoImagesLoadID;
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/galleryPhotos",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                imageList = data.d;
                loadImages(imageList);
                autoImagesLoad(imageList);
            }
        });
        function autoImagesLoad(imgList) {
            autoImagesLoadID = setInterval(function () {
                if (start + 1 > imgList.length) {
                    start = 0;
                }
                else {
                    start = start + 1;
                }
                $("#content > div.box > div.image > img").attr("src", "upload/" + imgList[start].photoPath);
                if (start % 5 == 0) {
                    var $divthumbs = $("#content > div.box > div.thumbs").empty().append("");
                    for (var i = start; i < start + 5; i++) {
                        if (imgList[i] && imgList[i].photoPath.length > 1) {
                            var $div = $("<div/>").attr("class", "thumb").attr("title", imgList[i].rowID);
                            var $divT = $("<div/>").attr("class", "imgthumb");
                            var $a = $("<a/>").attr("href", "javascript:;");
                            var $img = $("<img/>").attr("src", "upload/" + imgList[i].photoPath).appendTo($a);
                            $divT.append($a).appendTo($div);
                            $divthumbs.append($div);
                        }
                    }
                }
                $("#content > div.box > div.thumbs > div.thumb").css("background-color", "");
                $("#content > div.box > div.thumbs > div.thumb[title~=" + (start + 1) + "]").css("background-color", "Blue");
            }, 3000);
        }
        function loadImages(imgList) {
            $("#content > div.box > div.image > img").attr("src", "upload/" + imgList[start].photoPath);
            var $divthumbsTemp = $("<div/>");
            for (var i = start; i < start + 5; i++) {
                if (imgList[i] && imgList[i].photoPath.length > 1) {
                    var $div = $("<div/>").attr("class", "thumb").attr("title", imgList[i].rowID);
                    if (i == 0) {
                        $div.css("background-color", "Blue");
                    }
                    var $divT = $("<div/>").attr("class", "imgthumb");
                    var $a = $("<a/>").attr("href", "javascript:;");
                    var $img = $("<img/>").attr("src", "upload/" + imgList[i].photoPath).appendTo($a);
                    $divT.append($a).appendTo($div);
                    $divthumbsTemp.append($div);
                }
            }
            $("#content > div.box > div.thumbs").empty().html($divthumbsTemp.html());
        }
        $("#content > div.box > div.arrowleft").click(function () {
            if (start - 5 < 0)
                start = 0;
            else
                start = start - 5;
            $("#content > div.box > div.thumbs").animate({ "margin-right": "85%", height: "73px", width: "1px" }, "slow", function () {
                loadImages(imageList);
            });
            $("#content > div.box > div.thumbs").animate({ "margin-right": "0%", height: "73px", width: "545px" }, "slow");

        });
        $("#content > div.box > div.arrowright").click(function () {
            if (start + 5 < imageList.length)
                start = start + 5;
            $("#content > div.box > div.thumbs").animate({ "margin-left": "85%", height: "73px", width: "1px" }, "slow", function () {
                loadImages(imageList);
            });
            $("#content > div.box > div.thumbs").animate({ "margin-left": "0%", height: "73px", width: "545px" }, "slow");
        });
        $("#content > div.box > div.thumbs").on("mouseenter", "div.thumb", function () {
            start = ($(this).attr("title")) - 1;
            $("#content > div.box > div.image > img").attr("src", "upload/" + imageList[start].photoPath);
            $("#content > div.box > div.thumbs > div.thumb").css("background-color", "");
        });
        $("#content > div.box").mouseover(function () {
            clearInterval(autoImagesLoadID);
        });
        $("#content > div.box").mouseout(function () {
            autoImagesLoad(imageList);
        });
    });
</script>


 <!--begin pbox-->
    <div class="box">
        <h3>Image Description</h3>
        <!-- begin post -->
    <div class="image"> <img src="" height="400px" width="640px" alt="" /></div>
    <!-- end post -->
     <div class="arrowleft"><a href="javascript:void(0)"><img src="images/left.png"  alt="" /></a></div>
    <div class="thumbs">
    </div>
     <div class="arrowright"><a href="javascript:void(0)"><img src="images/right.png"  alt="" /></a></div>
    <div class="break"></div>
      </div>
  <!--end p bbox-->