<! DOCTYPE html>
<title> Picture Switching </title>
<script type= "Text/javascript" src= "Js/jquery-1.11.0.min.js" ></script>
<script type= "Text/javascript" >
var num = 0
$ (function () {
$ ("Div ol li"). MouseOver (function (e) {
$ (this). attr ("Class", "current");
$ (this). Siblings (). attr ("Class", ""); The sibling node's class attribute is set to null
Alert ($ (' ul '). Index ())
num = $ (' ul '). Index () + 2
var index = $ (this). index (); Record the index of the selected Li tag in ul
There are cascading phenomena in the picture to display the current picture, set the Z-index value of the current picture to be larger than the other sibling elements
$ ("Div ul li"). EQ (index). css ({"Left": "650px", "ZIndex": num})
$ ("Div ul li"). EQ (index). siblings (). CSS ("ZIndex", num-1);
Animation effect, the picture from the right fly into
$ ("Div ul li"). EQ (index). Animate ({left: "0"},500)
});
});
</script>
<style type= "Text/css" >
*{margin:0px;padding:0px;border:0px;}
Ul,ol{list-style:none;}
. all{width:650px;height:250px;margin:100px auto;position:relative;border:1px Solid Crimson;overflow:hidden;
. all ul{position:relative;z-index:1;position:relative;
* * Son never father
. all UL li{position:absolute;left:0;top:0px;
. all ol{position:absolute;z-index:2; right:10px;bottom:10px;
. All ol Li{width:20px;height:20px;background: #333; border:1px solid #509629; Font-weight:
bold;text-align:center;line-height:20px;float:left;margin-left:10px;margin-top:10px;}
. All ol. current{width:30px;height:30px;line-height:30px;border:1px solid red;margin-top:0px;
Cursor:pointer;}
</style>
<body>
<div class= "All" >
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li class= "Current" >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
