이미지 자동 슬라이드 구현 질문입니다.

이미지 슬라이드 구현은 되는데

자동으로 구현이 되질 않습니다. 자동구현도 되도록 한번 봐주실 수 있으신가요?

부탁드립니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<style>

.fadeX {width:100%; float:left;}
.fadeX .photo {overflow:hidden; margin:0 auto; width:100%; height:500px; position:relative;}
.fadeX .photo span {display:block; padding-top:5px; text-align:right;}
.fadeX .photo ul {text-align:left; height:100%; position:relative;}
.fadeX .photo ul li {float:left; text-align:center; display:none; width:100%; height:470px; position:relative; background:url("img01.jpg") center;} 
.fadeX .btn {padding-top:0; position:relative; clear:both; width:1100px; margin:0 auto; text-align:center;}
.fadeX .btn li {display:inline; padding:0 5px; cursor:pointer;}
.fadeX .btn li img {border:1px solid #ccc; width:200px;}
.fadeX .btn li.on img {border:2px solid #ff5555; width:200px;}

</style>

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>

 //클릭상품
 $(function(){
  autoplay:true;
  autoplaySpeed:2000;
  var btn = $(".fadeX .btn li");
  var list = $(".fadeX .photo li");
  list,btn.each(function(){ 
   var ind = $(this).index()-1; 
   ind++;
   $(this).click(function(){
    list.hide().eq(ind).fadeIn();
    btn.removeClass().eq(ind).addClass("on");
   });
  });
  list.eq(0).show();
  btn.eq(0).addClass("on");
 });

});
</script>

 </head>

 <body>
 
 <div class="fadeX">
  <div class="photo">
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
  <ul class="btn">
   <li><img src="bt_01.jpg" alt=""></li>
   <li><img src="bt_01.jpg" alt=""></li>
   <li><img src="bt_01.jpg" alt=""></li>
   <li><img src="bt_01.jpg" alt=""></li>
  </ul>
 </div>

 </body>
</html>