轮播图

<meta charset="utf8">
<style>
    img{height: 400px;width: 260px}
    span{color: #000;font-size: 50px}
</style>
<center>
<img src="" alt="一">
<img src="" alt="二" hidden>
<img src="" alt="三" hidden>
<img src="" alt="四" hidden>
<img src="" alt="五" hidden>
<br>
<span style="color: blue">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</center>
<!-- <script src='jquery-1.8.3.js'></script> -->
<script src="jquery-1.8.2.min.js"></script>
<script>
    $(function() {
        aoto()
        $('img').mouseover(function() {
                clearInterval(start)
        })
        $('img').mouseout(function() {
                aoto()
        })
        i=0
        function aoto() {
            start = setInterval(function() {        
                if($("img").eq(i).is(':visible')){
                    $("img").eq(i).hide()
                    $("span").eq(i).css('color','#000')
                    i++
                    i>4?$("img").eq(0).show():$("img").eq(i).show()
                    i = i>4?0:i
                    $("span").eq(i).css('color','blue')
                }
            },1000)
        }
    })
</script>