简单的Jquery轮播 

<html>
    <head>
        <title>轮播</title>
        <style>
        *{
        margin:0;
        padding:0;
        list-style:none;
        }
            #dingwei{
                position:absolute;
                width:300px;
                height:300px;
                left:300px;
                top:100px;
                overflow: hidden;
            }
            #dingwei ul{
                width: 300px; 
                height:300px;
            }
            #dingwei ul li{
            display:inline;
            float:left;
            position:absolute;
            }
        #dingwei ul img{
            width:300px;
            height:300px;
        }
        #dingwei>span{
            position:absolute;
            z-index:99;
            width:10%;
            height:40px;
            font-size:50px;
            top:40%;
            line-height:100%;
            text-align:center;
            cursor:pointer;
            display:none;
        }
        #right{
            left:90%;
        }
        </style>
        <script src="jquery-3.1.1.min.js">
        
        </script>
    </head>
    <body>
        <div id="dingwei">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
            <ul id="pics">
                <li style="z-index:4"><a><img src="1.jpg"/></a></li>
                <li style="z-index:3"><a><img src="2.jpg"/></a></li>
                <li style="z-index:2"><a><img src="3.jpg"/></a></li>
                <li style="z-index:1"><a><img src="4.jpg"/></a></li>
            </ul>
            
        </div>

        <script>
            $(document).ready(function(){
                $("#dingwei").mouseover(function(){
                    $("#dingwei span").css("display","block");
                });
                $("#dingwei").mouseout(function(){
                    $("#dingwei span").css("display","none");
                });
                $("#right").click(function(){
                    var last=$("#pics li").last();
                    $(last).css({"left":-($("#pics img").width()),"z-index":"5"});
                    $(last).animate({left:0},function(){    
                        $("#pics li").each(function(){                
                            $(this).css("z-index",parseInt($(this).css("z-index"))-1);
                        });
                        $("#pics li").first().before($(last));
                    });
                });
                $("#left").click(function(){
                    var first=$("#pics li").first();
                        $(first).animate({left:-$(first).find("img").width()},function(){
                                var d="#pics li:not(:eq("+$("#pics li").index($(first))+"))";
                                    $(d).each(function(){
                                        var zindex=parseInt($(this).css("z-index"));
                                        $(this).css("z-index",zindex+1);
                                    });
                                
                                $("#pics").append($(first).detach().css({"z-index":"1","left":"0"}));
                            
                        });
                });
            });
        </script>
    </body>
</html>

 

posted @ 2017-03-04 15:17  夏风微凉  阅读(87)  评论(0)  编辑  收藏  举报