带有缩略图和文字提示的轮播图

这也是轮播图做了好久，还是刚进入前端岗位工作不久，自己空余时间写的。
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>lubo</title>
   <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
   <!--<script type="text/javascript" src="js/headerBg.js"></script>-->
   <style>
      a, img { border: none; }
      #headerBg { position: relative; margin: 40px auto 0 auto; width: 750px; height: 460px; overflow: hidden; border-radius: 10px 10px;}
      #headerBg .imgbox { width: 4500px; height: 380px; position: absolute; left: 5px; top: 4px; }
      #headerBg .imgbox img { float: left; width: 750px; height: 380px; }
      #headerBg .btnbox { width: 750px; height: 120px; position: absolute; top: 395px; bottom: 0px;}
      #headerBg .btnbox a { cursor: pointer; display: inline-block; float: left; width: 120px; height: 64px; margin: 0 0 0 4px;}
      #headerBg .btnbox a img { position: relative; display: inline; width: 116px; height: 58px; float: left; border: 3px solid gray; border-radius: 5px 5px; }
      #headerBg .btnbox a .img_hover { border: 3px solid ghostwhite; border-radius: 5px 5px; }
      #headerBg .btn {
         width: 40px;
         height: 90px;
         ">rgba(0, 0, 0, 0.5);
         position: absolute;
         font-size: 80px;
         color: white;
         font-family: "å®‹ä½“";
         margin-top: 250px;
         display: none;
      }
      #headerBg .btn:hover { ">rgba(0, 0, 0, 0.7); cursor: pointer; }
      #headerBg .btn_left { left: 0px; top: -105px; }
      #headerBg .btn_right { left: 710px; top: -105px; }
      body{ background: black  ; }

      #headerBg .move_text{overflow:hidden;width:750px;height:40px;position:absolute;top:345px;">rgba(0, 0, 0, 0.5); }
      #headerBg .move_text h3{margin:10px 0 10px 0;font-size:20px;text-indent: 3em;Letter-spacing: 1em;color:ghostwhite;}
   </style>
</head>
<body>
   <div  ).mouseout( function()
   {
      m_over = true;
   } );
   </script>
</body>
</html>
以上是个人写的，可供参考。