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

优酷轮播图的不同之处在于用克隆在最后插入新的节点图片，因而在轮播时角标位的判断是关键

HTML代码：

<div class="box">
    <ul>
        <li><img src="image/youku/1.jpg" height="410" width="1190" alt=""/></li>
        <li><img src="image/youku/2.jpg" alt=""/></li>
        <li><img src="image/youku/3.jpg" alt=""/></li>
        <li><img src="image/youku/4.jpg" alt=""/></li>
        <li><img src="image/youku/5.jpg" alt=""/></li>
        <li><img src="image/youku/6.jpg" alt=""/></li>
    </ul>
    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <span class="left"></span>
    <span class="right"></span>
</div>

CSS代码：

 .box{
            width: 1190px;
            height: 410px;
            margin:20px auto;
            overflow: hidden;
            position: relative;
        }
        .box ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        .box ul li{
            float: left;
            width: 1190px;
            height: 410px;
        }
        .box ol{
            position: absolute;
            text-align: center;
            bottom: 10px;
            width: 100%;
            font-size:0;
        }
        .box ol li{
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius:50%;
            border:2px solid #ccc;
            display:inline-block;
            margin:0 2px;
            cursor: pointer;
        }
        .box ol .current{
            background: lightskyblue;
            border:2px solid #fff;
        }
        .box span{
            width: 45px;
            height: 45px;
            position: absolute;
            top:50%;
            margin-top:-22px;
            background: pink;
            cursor: pointer;
        }
        .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;
        }

  <script>
        $(function () {
            //克隆第一张，放入最后
            var tag = $('.box ul li:first').clone();
           $('.box ul').append(tag);

            //设定ul的宽为所有li的宽之和
            var w = $('.box ul li').width();
            var lis = $('.box ul li').length;
            $('.box ul').width(w*lis);

            //定义定时器和累加器变量
            var num = 0;
            var timer = null;

            //点击角标事件
            $('.box ol li').click(function () {
                var index = $(this).index();
                $('.box ul').stop().animate({left:-index*w},500);
                $(this).addClass('current').stop().siblings().removeClass('current');
                num = index;
            });
            //右点击事件
            $('.box .right').click(function () {
                autoplay();
            });
            //左点击事件
            $('.box .left').click(function () {
                prevplay();
            });
            //自动播放
            function autoplay(){
                num++;
                if(num>lis-1){  //播放到最后一张（--克隆的那一张时）
                    num = 1; //下一次播放从第二张开始，因而角标为1
                }
                $('.box ul').stop().animate({left:-num*w},500);
                $('.box ol li').eq(num).addClass('current').stop().siblings().removeClass('current');
                if(num==lis-1){
                    $('.box ol li').eq(0).addClass('current').stop().siblings().removeClass('current');//ol下面的li的仍从0开始
                };
            };
            function prevplay(){
                num--;
                if(num < 0){
                    //如果点击第一张，那么克隆最后一张的前一张才是真正的最后一张，角标是lis-1
                    num = lis-2;
                }
                $('.box ul').stop().animate({left:-num*w},500);
                $('.box ol li').eq(num).addClass('current').stop().siblings().removeClass('current');
                if(num==lis-1){ //在角标是最后一个时，实际是克隆的第一张，下面的ol应该从0开始
                    $('.box ol li').eq(0).addClass('current').stop().siblings().removeClass('current');
                };
            }
            timer = setInterval(autoplay,2000);
            $('.box').hover(function () {
                clearInterval(timer);
            }, function () {
                timer = setInterval(autoplay,2000);
            })
        });
    </script>