Level carousel Diagram

<! DOCTYPE html>{margin:0; padding:0; } UL, ol {list-Style:none;            }. Wrap {width:650px;            height:250px; margin:100px Auto0;            position:relative;        Overflow:hidden; }. Wrap ol {margin-top:50px;        }. Wrap img {display:block;            }. Wrap ul {height:250px; Z-index:1;        position:relative;            }. Wrap ol {height:30px; Z-index:2;            Position:absolute; Bottom:0; Right:0; }. Wrap> UL >Li {position:absolute; Top:0; Left:0; }. Wrap> Ol >Li {float: Left;            width:20px;            height:20px; Text-Align:center; Line-height:20px;                     border:1px solid white; Border-radius:10px;                   Background:gray; }. Wrap> Ol >Li:hover {cursor:pointer;            }. Wrap Li.active {padding:1px;            Color:orange; Margin-top:-2px;                    border:1px solid Orange; }    </style> <script type= "Text/javascript" src= "Jquery-1.11.1.min.js" ></script> <script>$ (document). Ready (function () {            varZIndex = 0; $(". Wrap > Ol > Li"). MouseEnter (function() {ZIndex++; $( This). addclass ("active"). Siblings (). Removeclass ("Active"); $(". Wrap > Ul > li"). EQ ($ ( This). Index ()). css ({"Z-index": ZIndex,"Left": 650}). Animate ({"Left": 0                        }, 1000);        });    }); </script>
Level carousel Diagram