jquery实现图片轮播淡入淡出效果

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       * {margin:0; padding:0;}
       #container {605px; height:284px; position:relative; border:1px solid; margin:0 auto;}
       .topic {position:absolute; top:0px; left:0px; display:none;}
       #pages {100%; height:20px; padding:5px 0; background:black; position:absolute; left:0; bottom:0;}
       #pages div {20px; height:20px; border-radius:10px; background:white; margin-left:10px; float:left;}
       #pages div.curr {background:red;}
       #prev, #next { 50px; height:100px; position:absolute; top:0; bottom:0; margin:auto 0; background:black; opacity:0.5; color:white; font-size:30px; line-height:100px; text-align:center;}
       #next {right:0;}
   </style>
   <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
   <script type="text/javascript">
       $(function(){
           var curIndex=0,
               nextIndex=1,
               len=$(".topic").length;

               //小圆点的点击事件的实现
               for(var i=0;i<len;i++){
                   $("<div></div>").appendTo("#pages");
               }
           $("#pages div").eq(0).addClass("curr");
           //小圆点的点击事件
           $("#pages div").click(function(){
               if(curIndex===$(this).index()){
                   return;
               }
               nextIndex=$(this).index();
               move();
           });
           //上一页
           $("#prev").click(function(){
               nextIndex=curIndex-1;
               if(nextIndex<0){
                   nextIndex=len-1;
               }
               move();
           });
           //下一页
           $("#next").click(function(){
               move();
           });

           //运动函数
           function move(){
               $("#pages div").eq(curIndex).removeClass("curr");
               $("#pages div").eq(nextIndex).addClass("curr");
               $(".topic").eq(curIndex).fadeOut();
               $(".topic").eq(nextIndex).fadeIn();
               curIndex=nextIndex;
               nextIndex++;

               if(nextIndex===len){
                   nextIndex=0;
               }
           }
           //鼠标移入时停止计时器，移出时开启计时器
           $("#container").hover(function(){
               clearInterval(time);
           },function(){
               time=setInterval(move,3000);
           }).trigger("mouseleave");

       });
   </script>
</head>
<body>
   <div id="container">
       <div class="box">
           <div class="topic" style="display:block;">
               <a href="#"><img src="img/1.jpg" height="284" width="605"></a>
           </div>
           <div class="topic">
               <a href="#"><img src="img/2.jpg" height="284" width="605"></a>
           </div>
           <div class="topic">
               <a href="#"><img src="img/3.jpg" height="284" width="605"></a>
           </div>
           <div class="topic">
               <a href="#"><img src="img/4.jpg" height="284" width="605"></a>
           </div>
           <div class="topic">
               <a href="#"><img src="img/5.jpg" height="284" width="605"></a>
           </div>
           <div class="topic">
               <a href="#"><img src="img/6.jpg" height="284" width="605"></a>
           </div>
       </div>
       <div id="pages"></div>
       <div id="prev"><</div>
       <div id="next">></div>
   </div>
</body>
</html>