case analysis:
1, move the mouse to the left and right above the li and the corresponding intermediate image will be displayed, the remaining photo Hide
2, the left index number of 0-8 li, li middle picture index number is 0-17, the right index number of 0-8 li, li, but the right picture corresponding to the index number is 9-17, to plus 8
Key Code
$ (function () { $ ( " #left> li " ) .mouseenter (function () { var index = $ ( the this ) .index (); // get the index number of clicks small li $ ( "#center> Li: EQ ( "+ index +") " ) the .Show () siblings.hide (); // index variable is not written directly $ (." Center #> Li: EQ (index) ") }) $ ( " #right> Li " ) .mouseenter (function () { var index = $ ( the this ) .index () +. 9; // index number of the right image to increase. 9 $ ( " #center> Li " ) .EQ (index ) .show (.) sibings.hide () ; // $ ( "# center> li") eq (index) == $ ( "# center> li: eq (" + index +. ")");Commonly equal sign }) })
The complete code
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } a { text-decoration: none; } .wrapper { width: 298px; height: 248px; margin: 100px auto 0; border: 1px solid pink; overflow: hidden; } #left, #center, #right { float: left; } #left li, #right li { background: url(images/lili.jpg) repeat-x; } #left li a, #right li a { display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; line-height: 27px; text-align: center; color: black; } #left li a:hover, #right li a:hover { background-image: url(images/abg.gif); } #center { border-left: 1px solid pink; border-right: 1px solid pink; } </style> <script src="../jquery-1.12.4.min.js"></script> <script> //找不到对象 $(function () { $("#left>li").mouseenter(function () { $("#center>li:eq(" + $(this).index() + ") " .) The .Show () SIBLINGS () hide ();. }); $ ( " #Right> Li " ) .mouseenter (function () { $ ( " #center> Li " ) .EQ ($ ( the this ) .index () + . 9 .) the .Show () SIBLINGS () hide ();. }); }); // . $ ( "# left> Li") MouseEnter (function () { // // let corresponding to the center of the display target li, li other hidden // var IDX = $ (the this) .index (); // $ ( "# center> li: EQ (" IDX + + ")") Show ().. SIBLINGS () hide ();. // }); // // $("#right>li").mouseenter(function () { // var idx = $(this).index() + 9; // $("#center>li").eq(idx).show().siblings().hide(); // // //$("#center>li").eq(idx) :jq对象 // //$("#center>li").get(idx);:js对象 // }); // }); </script> </head> <body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> </ul> <ul id="center"> <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li> <li><the href = A "Images / Jeans .jpg"> <IMG the src ="#" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li> </ul> <ul id="right"> <li><a href="#">女包</a></li> <li><a href="#">男靴</a></li> <li><a href="#">登山鞋</a></li> <li><a href="#">皮带</a></li> <li><a href="#">围巾</a></li> <li><a href="#">皮衣</a></li> <li><a href="#">男毛衣</a></li> <li><a href="#">男棉服</a></li> <li><a href="#">男包</a></li> </ul> </div> </body> </html>