jQuery图片轮换效果

<!doctype html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>jQuery图片轮换效果</title>
  <style type="text/css">
  *{
    margin:0px;
    padding:0px;
    text-align:center;
  }
 
  #banner{
    width:730px;
    height:454px;
    margin:50px auto;
    position:relative;/*相对定位,相对于.btn按钮*/
    text-align:left;
  }
  .pic image {
    display:block;/*默认有图片不显示*/
    position:absolute;/*绝对定位.对应的是.pic这个div*/
    top:0px;
    left:0px;
  }
  .pic a{
    display:none;
  }
  .pic{        /*专门显现图片区*/
    position:relative;/*相对定位.对应.pic img*/
    border:1px solid red;
  }
  .btn{
    width:150px;
    height:18px;
    position:absolute;/*绝对定位相对于banner div*/
    bottom:5px;
    right:290px;
  }
  .btn ul li{
    background-color:#000000;/*黑色*/
    color:#ffffff;
    list-style-type:none;
    width:18px;
    height:18px;
    float:left;
    border-radius:9px;/*变成圆的*/
    text-align:center;
    line-height:18px;
    cursor:pointer;/*鼠标移动变手指状态*/
    margin-left:5px;
  }
.btn ul li.one{
   background-color:#ff9966;
  }
  </style>
  <script src="jquery-3.0.0.min.js"></script>
  <script>
        $(function(){
            $("#all li").mouseover(function(){//鼠标进入离开事件
                $(this).css("background-color","#ff00ff").siblings().css("background-color","white");
                $(this).css({"background-color":"red","font-size":"9px"}).siblings().hide();
            });
 
            $(window).scroll(function(){//鼠标滚动事件
                var _top=$(window).scrollTop();//获得鼠标滚动的距离
            });
            
            //手动播放图片
            $(".btn ul li").hover(function(){
                
                $(this).addClass("one").siblings().removeClass("one");
                index=$(this).index();
                i=index;
                $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();  
                });
 
            //自动播放图片
            var i=0;
            var t=setInterval(autoplay,1000);
            function autoplay(){
                i++;
                if(i>5)i=0;        
                $(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
                $(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide(); 
            }
 
                $("#banner").hover(function(){
                    clearInterval(t);
                },function(){
                    t=setInterval(autoplay,1000);
                });
            });
  </script>
 </head>
 <body>
    <!--<ul id="all">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
        <li>第六个</li>
        <li>第七个</li>
    </ul>-->
    <!--<div style="width:600px;height:900px;background-color:#ffcc66">ttt</div>-->
    <div id="banner">
        <div class="pic">
            <a href="#" style="display:block"><img src="image/1.jpg"/></a>
            <a href="#"><img src="image/2.png"/></a>
            <a href="#"><img src="image/3.jpg"/></a>
            <a href="#"><img src="image/4.jpg"/></a>
            <a href="#"><img src="image/5.jpg"/></a>
            <a href="#"><img src="image/6.jpg"/></a>
            
        </div>
        <div class="btn">
            <ul>
                <li class="one">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
 
            </ul>
        <div>
    
    </div>
 </body>
</html>