网页常用动态效果--小米官网轮播图

关键在于层级关系

HTML代码：

div.box>ul+ol+span*2(ul层级1，ol层级2，span层级3)

ul>li*5>img（注意可以将首个li的z-index定为10）

ol>li*5

CSS代码：

        .box{
            width:992px;
            height:420px;
            position: relative;
            overflow:hidden;
        }
        .box ul{
            position: relative;
            z-index:1;
        }
        .box ul li{
            position: absolute;
            top:0;
            left:0;
        }
        .box ol{
            position: absolute;
            z-index:2;
            right:5px;
            bottom:5px;
        }

        .box ol li{
            float: left;
            width:30px;
            height:20px;
            border:1px solid black;
            margin-left: 5px;
            text-align: center;
            line-height:20px;
            cursor: pointer;
        }
        .box ol li.current{
            background: lightsalmon;
        }
        span{
            width:100px;
            height:50px;
            position: absolute;
            top:50%;
            margin-top:-25px;
            background: rgba(0, 0, 0, 1);
            z-index:3;
            display:none;
            cursor: pointer;
        }
        .right{
            right:0;
        }
        </style>

JQ代码：

        <script>
            $(function(){
                //左右点击时图片的显示，关键在于层级关系
                var mytop = 10;
                var num=0;//累加器
                var lis = $(‘.box ul li‘).length;
                var timer = null;
                var w1 = $(‘.box ul li img‘).width();
                function autoplay(){
                    mytop++;
                    num++;
                    if(num > lis-1){
                        num = 0;
                    }
                    $(‘.box ul li‘).eq(num).css({zIndex:mytop}).hide().stop().fadeIn(500);
                    $(‘.box ol li‘).eq(num).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
                }
                 $(‘.right‘).on(‘click‘,function(){
                    autoplay();
                })
                timer = setInterval(autoplay, 2000);
                $(‘.left‘).on(‘click‘,function(){
                    mytop++;
                    num--;
                    if(num <0){
                        num = lis -1;
                    }
                    $(‘.box ul li‘).eq(num).css({zIndex:mytop}).hide().stop().fadeIn(500);
                    $(‘.box ol li‘).eq(num).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
                });
                $(‘.box‘).hover(function() {
                    clearInterval(timer);
                    $(‘span‘).fadeIn(500);
                }, function() {
                   timer=setInterval(autoplay, 2000);
                   $(‘span‘).fadeOut(500);
                });
                //角标点击,用num表示当前显示，index表示即将显示
                $(‘.box ol li‘).click(function(event) {
                    mytop++;
                    var index = $(this).index();
                    if(index>num){
                        //先定位在右边
                        $(‘.box ul li‘).eq(index).css({left:w1,zIndex:mytop});
                    }else{
                        //定位在左边
                        $(‘.box ul li‘).eq(index).css({left:-w1,zIndex:mytop});
                    }
                    $(‘.box ul li‘).eq(index).stop().animate({left:0},500);
                    $(‘.box ol li‘).eq(index).addClass(‘current‘).siblings().removeClass(‘current‘);
                    num = index;
                });
            });
        </script>