网页常用动态效果--网易轮播图

与小米轮播图类似，多了下角标进度条，同时加了切换效果

HTML代码：

<div class="box">
    <div>
        <ul>
            <li style="z-index:1;"><img src="image/163/1.jpg" alt="" width="310" height="220"/>
                <span></span>
                <p>网页常用动态效果---网易轮播图</p>
            </li>
            <li><img src="image/163/2.jpg" alt=""/><span></span>

                <p>网页常用动态效果---网易轮播图</p>
            </li>
            <li><img src="image/163/3.jpg" alt=""/><span></span>

                <p>网页常用动态效果---网易轮播图</p>
            </li>
            <li><img src="image/163/4.jpg" alt=""/><span></span>

                <p>网页常用动态效果---网易轮播图</p>
            </li>
            <li><img src="image/163/5.jpg" alt=""/><span></span>

                <p>网页常用动态效果---网易轮播图</p>
            </li>
            <li><img src="image/163/6.jpg" alt=""/><span></span>

                <p>网页常用动态效果---网易轮播图</p>
            </li>
        </ul>
    </div>
    <ol>
        <li class="current"><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ol>
    <span class="left"></span>
    <span class="right"></span>
</div>

CSS代码：

    <style>
        *{
            padding:0;
            margin:0;
            list-style:none;
        }
        img{
            display: block;
        }
        .box{
            width: 310px;
            height: 220px;
            margin:100px auto;
            position: relative;
            /*overflow: hidden;*/
        }
        .box ul{
            position: relative;
            z-index: 1;
        }
        .box ul li{
            position: absolute;
            left: 0;
            top:0;
        }
        .box ul span,.box ul p{
            width: 310px;
            height: 36px;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .box ul span{
            background: #000;
            opacity: 0.5;
        }
        .box ul p{
            line-height: 36px;
            text-align: center;
            color: #fff;
            font-size: 14px;
        }
        .box ol{
            position: absolute;
            bottom: -20px;
            width: 100%;
            text-align: center;
            font-size: 0;
            /*border: 1px solid red;*/
            /*z-index: 5;*/
        }
        .box ol li{
            width: 24px;
            height: 5px;
            background: #ccc;
            display: inline-block;
            margin-left: 5px;
        }
        .box ol .current{
            background: lightskyblue;
        }
        .box ol .current span{
            background: blue;
        }
        .box ol li span{
            width: 10px;
            height: 5px;
            display: block;
        }
        .box .left,.box .right{
            width: 45px;
            height: 45px;
            position: absolute;
            top: 50%;
            margin-top:-22px;
            z-index: 2;
        }
        .box .left{
            background: url(image/youku/left.png) 0 0 no-repeat;
            left: 10px;
        }
        .box .right{
            background: url(image/youku/right.png) 0 0 no-repeat;
            right: 10px;
        }
    </style>

 <script>
        $(function () {
            var mytop = 1;
            var num = 0;
            var timer = null;
            var w = $('.box ul li').width();
            var lis = $('.box ul li').length;
            $('.box ol li').click(function () {
                mytop++;
                var index = $(this).index();
                if(index>num){
                    $('.box ul li').eq(index).css({left:w,zIndex:mytop});//将要的在右
                    $('.box ul li').eq(num).animate({left:-w},500); //当前的在左
                }else{
                    $('.box ul li').eq(index).css({left:-w,zIndex:mytop});
                    $('.box ul li').eq(num).animate({left:w},500);
                }
                $('.box ul li').eq(index).stop().animate({left:0},500);
                $(this).addClass('current').siblings().removeClass('current');
                num = index;
            });
            function prevplay(){
                mytop++;
                num--;
                if(num <0){
                    num = lis-1;
                }
                $('.box ul li').eq(num+1).css({left:w,zIndex:mytop});//将要的在右
                $('.box ul li').eq(num).animate({left:-w},500); //当前的在左
                $('.box ul li').eq(num).stop().animate({left:0},500);
                $('.box ul li').eq(num).addClass('current').siblings().removeClass('current');
            }
            $('.box .left').click(function () {
                prevplay();
            });
            $('.box .right').click(function () {
                autoplay();
            });
            function autoplay(){
                //之前的在左，即将的在右
                mytop++;
                num++;
                if(num >lis-1){
                    num = 0;
                }
                $('.box ul li').eq(num-1).animate({left:-w},500);
                $('.box ul li').eq(num).css({left:w,zIndex:mytop});
                $('.box ul li').eq(num).stop().animate({left:0},500);
                $('.box ul li').eq(num).addClass('current').siblings().removeClass('current');
            }
            timer=setInterval(autoplay, 3000);
            $('.box').hover(function() {
                clearInterval(timer);
            }, function() {
                timer=setInterval(autoplay, 3000);
            });
        })
    </script>