轮播图定时器翻页-jQuery方法

纠结死了的东西，留着以后备用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>DOM学习</title>
   <style type="text/css">
   * { margin: 0; padding: 0; list-style: none;}
   a{ text-decoration: none; coor: #000;}
   .fl{ float:left;}
   .fr{ float:right;}
   .navBar { 800px; height: 100%; overflow: hidden; border: 1px solid #ccc; margin: 0 auto; margin-top:10px;}
   .navBar .navBar_btn { 800px; height: 25px; line-height: 25px; }
   .navBar .navBar_btn ul li { float:left; display: block; height: 25px; padding: 0 20px; background: red; margin-right:5px;}
   .navBar .navBar_btn ul li.active{ background: #ccc;}
   .navBar .navBar_btn ul li a { text-decoration: none; color: #fff;}
   .navBar .navBar_con { position:relative; 800px; height: 300px; overflow: hidden;}
   .navBar .navBar_con ul li{ display:block; float:left; 800px; height: 300px;}
   .Pbtn{ position:absolute;top:100px; 780px; padding:0 10px;font-size:24px; font-family:Microsoft YaHei; color: #000;}
   .Pbtn span{ cursor: pointer;}
   </style>
   <script type="text/javaScript" src="jquery-1.7.2.js"></script>
   <script type="text/javaScript">
       $(function(){
           var box=$(".navBar");
           var btn=$(".navBar_btn li"); //获取按钮LI
           var con=$(".navBar_con li"); //获取内容li
           var iNow=0; // 遍历初始值
           var timer= null; //定时器
           var btns=btn.length; //按钮个数
           var cons=con.length; //图标个数

           //绑定按钮鼠标事件
           btn.mouseover(function(){
               iNow=$(this).index();
               showpic();
               });

           //下一张上一张
           $(".next").click(function(){
               iNow+=1;
               if(iNow==btns){
                   iNow=0;
                   }
               showpic();
               });
           $(".prev").click(function(){
                   iNow-=1;
               if(iNow == -1){
                   iNow=cons-1;
                   }
               showpic();
               });
           function show(){
               timer=setInterval(function(){
                   iNow++;
                   if(iNow>btns){
                       iNow=0;
                       }
                   showpic(iNow);
                   },300);
               };

           show();
           //自动播放
           $(".navBar").hover(function(){
               clearInterval(timer);
           },function(){
               show();
               }).tigger("mouseleave");

           function showpic(index){
               btn.eq(iNow).addClass("active").siblings().removeClass("active");
               con.eq(iNow).show().siblings().hide();
               };

       });
   </script>
</head>
<body>
   <div class="navBar">
       <div class="navBar_btn">
           <ul>
               <li class="active"><a href="#">11111</a></li>
               <li><a href="#">22222</a></li>
               <li><a href="#">33333</a></li>
               <li><a href="#">44444</a></li>
           </ul>
       </div>
       <div class="navBar_con">
           <ul>
               <li>111111111111111111111111</li>
               <li>222222222222222</li>
               <li>3333333333333333333333</li>
               <li>44444444444444444444444</li>
           </ul>
            <div class="Pbtn"><span class="fl prev">-</span><span class="fr next">+</span></div>
       </div>
   </div>
</body>
</html>