Slideshow with changing background

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="web design, website development, web application development, print design, database development, ecommerce websites, search engine optimization, packaging design" />
<meta name="description" content="Design Chemical, Bangkok provides web design, website development, web application development, print design, database development, ecommerce websites, search engine optimization &amp; packaging design." />
<meta name="robots" content="all" />
<title>jQuery Demo - Ultimate Image Swap Gallery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}
ul{list-style:none;}

#gallery {position: absolute; z-index: 1; width: 660px; margin: 0 auto; left: 50%; margin-left: -330px;}
#gallery ul {padding-left: 10px;}
#gallery li {display: inline; margin-right: 3px;}
#gallery li:hover {cursor: pointer;}
#gallery #main-img {background: url("bg_img.png") no-repeat 0 0; padding: 26px;}
#bgs {position: absolute; z-index: 0; width: 100%; height: 100%; background: url("gallery/bgs/img_1.jpg");}
</style>
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
    $("#gallery li img").click(function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
        $('#bgs').css('background-image','url(gallery/bgs/img_3.jpg)');
    });
    var imgSwap = [];
     $("#gallery li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>
</head>
<body>
    <div id="bgs"></div>
    <div id="gallery">
        <img src="gallery/img_1.jpg" alt="" id="main-img" />
        <ul>
            <li><img src="gallery/thumb/img_1.jpg" alt="" /></li>
            <li><img src="gallery/thumb/img_2.jpg" alt="" /></li>
            <li><img src="gallery/thumb/img_3.jpg" alt="" /></li>
            <li><img src="gallery/thumb/img_4.jpg" alt="" /></li>
            <li><img src="gallery/thumb/img_5.jpg" alt="" /></li>
            <li><img src="gallery/thumb/img_6.jpg" alt="" /></li>
        </ul>
    </div>
</body>
</html>