JQuery实现旋转轮播图

Posted 2020-11-01 ypengbk

css部分

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width:100%;
            height:353px;
            margin-top: 20px;
        }
        .prev{
            display: block;
            width:50px;
            height:50px;
            background:url(img/prev.png);
            position: absolute;
            left: 110px;
            top:192px;
            z-index:100;
        }
        .next{
            display: block;
            width:50px;
            height:50px;
            background:url(img/next.png);
            position: absolute;
            right:110px;
            top:192px;
            z-index:100;
        }
        ul li{
            position: absolute;
            list-style: none;
            display: none;
        }
        ul{position:relative;margin:0 auto;width:1000px;} 
        ul li img{width:100%;}
        li.banner1{display:block;width:500px;left:100px;top:60px;z-index:2}
        li.banner2{display:block;width:599px;left:200px;top:40px;z-index:3}
        li.banner3{display:block;width:500px;right:100px;top:60px;z-index:2}
    </style>

html部分

<div class="container">
        <a href="javascrpt:;" class="prev"></a>
        <a href="javascrpt:;" class="next"></a>
        <ul>
            <li class="banner1"><img src="img/4.png" /></li>
            <li class="banner2"><img src="img/1.png" /></li>
            <li class="banner3"><img src="img/2.png" /></li>
            <li><img src="img/3.png" /></li>
        </ul>
    </div>

JQuery部分

<script>
        //0-1
        //1-2
        //2-3
        //3-0

        //0-3
        //1-0
        //2-1
        //3-2

        $(function(){
            var arr = [];
            $("ul>li").each(function(i,o){
                arr.push({left:$(o).position().left,top:$(o).position().top,width:$(o).width(),zIndex:$(o).css("zIndex")});
            });
            var isPrev = true;
            var prev_in = 3;
            var prev_out = 2;
            var next_out = 0;
            var next_in = 3;
            $(".prev").click(function(){
                if(isPrev){
                    isPrev = false;
                    arr.push(arr[0]);
                    arr.shift();
                    $("ul>li").each(function(i,o){
                        if(i == prev_out){
                            $(o).fadeOut(200,function(){
                                isPrev = true;
                            });
                        }
                        else if(i == prev_in){
                            $(o).css({left:arr[i].left,top:arr[i].top,width:arr[i].width,zIndex:arr[i].zIndex}).fadeIn(200);
                        }
                        else{
                            $(o).css({zIndex:arr[i].zIndex}).animate({left:arr[i].left,top:arr[i].top,width:arr[i].width},200);
                        }
                    });
                    next_out = prev_in;
                    next_in = prev_out;
                    prev_in--;
                    prev_out--;
                    if(prev_out == -1){
                        prev_out = 3;
                    }
                    if(prev_in == -1){
                        prev_in = 3;
                    }
                }
            });
            var isNext = true;
            $(".next").click(function(){
                if(isNext){
                    isNext = false;
                    arr.unshift(arr[arr.length-1]);
                    arr.pop();
                    $("ul>li").each(function(i,o){
                        if(i == next_out){
                            $(o).fadeOut(200,function(){
                                isNext = true;
                            });
                        }
                        else if(i == next_in){
                            $(o).css({left:arr[i].left,top:arr[i].top,width:arr[i].width,zIndex:arr[i].zIndex}).fadeIn(200);
                        }
                        else{
                            $(o).css({zIndex:arr[i].zIndex}).animate({left:arr[i].left,top:arr[i].top,width:arr[i].width},200);
                        }
                    });
                    prev_in = next_out;
                    prev_out = next_in;
                    next_out++;
                    next_in++;
                    if(next_out == 4){
                        next_out = 0;
                    }
                    if(next_in == 4){
                        next_in = 0;
                    }
                }
            });
        });
    </script>