jQuery实现呼吸轮播图

<div class="all" id='box'>        <div class="screen">            <ul>                <li><img src="images/01.jpg" width="500" height="200" /></li>                <li><img src="images/02.jpg" width="500" height="200" /></li>                <li><img src="images/03.jpg" width="500" height="200" /></li>                <li><img src="images/04.jpg" width="500" height="200" /></li>                <li><img src="images/05.jpg" width="500" height="200" /></li>            </ul>            <ol>                <li class="current">1</li>                <li>2</li>                <li>3</li>                <li>4</li>                <li>5</li>            </ol>        </div>        <div id="arr">            <span id="left">&lt;</span>            <span id="right">&gt;</span>        </div></div>

* {            padding: 0;            margin: 0;            list-style: none;            border: 0;        }        .all {            width: 500px;            height: 200px;            padding: 7px;            border: 1px solid #ccc;            margin: 100px auto;            position: relative;        }        .screen {            width: 500px;            height: 200px;            overflow: hidden;            position: relative;        }        .screen li {            width: 500px;            height: 200px;            overflow: hidden;            float: left;        }        .screen ul {            position: absolute;            left: 0;            top: 0px;            width: 2500px;        }        .all ol {            position: absolute;            right: 10px;            bottom: 10px;            line-height: 20px;            text-align: center;        }        .all ol li {            float: left;            width: 20px;            height: 20px;            background: #fff;            border: 1px solid #ccc;            margin-left: 10px;            cursor: pointer;        }        .all ol li.current {            background: yellow;        }        #arr {            display: none;        }        #arr span {            width: 40px;            height: 40px;            position: absolute;            left: 5px;            top: 50%;            margin-top: -20px;            background: #000;            cursor: pointer;            line-height: 40px;            text-align: center;            font-weight: bold;            font-family: '黑体';            font-size: 30px;            color: #fff;            opacity: 0.3;            border: 1px solid #fff;        }        #arr #right {            right: 5px;            left: auto;        }

$(function () {        var index = 0;        //鼠标移入        $('#box').mouseenter(function(){            $('#arr').show();        })        //鼠标移出        $('#box').mouseleave(function(){            $('#arr').hide();        })        $('#right').click(function(){            if(index == $('.screen>ul>li').length-1){ //最后一张                index = 0;            }else {               index++;             }            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);            //下方页码对应高亮            $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')        })        $('#left').click(function(){            if(index == 0){ //第一张                index = $('.screen>ul>li').length-1;            }else {                index--;            }            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);            //下方页码对应高亮            $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')        })        //页码点击轮播图片        $('.screen>ol>li').click(function(){            index = $(this).index()            $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200);            $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')        }) });