1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>轮播demo</title> 6 </head> 7 <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> 8 <style> 9 *{ 10 margin: 0px; 11 padding: 0px; 12 } 13 li{ 14 list-style-type: none; 15 } 16 a{ 17 text-underline-style: none; 18 } 19 div{ 20 width: 400px; 21 height: 200px; 22 } 23 img{ 24 width：400px; 25 height: 200px; 26 position: absolute; 27 top: 0px; 28 left: 0px; 29 z-index: 1; 30 } 31 #ul2 li{ 32 display: inline; 33 height: 20px; 34 float: left; 35 width: 30px; 36 line-height: 100%; 37 text-align: center; 38 } 39 #ul2{ 40 position: absolute; 41 background-color: #ccc; 42 width: 150px; 43 height: 20px; 44 z-index: 100; 45 left: 0px; 46 top: 200px; 47 } 48 #ul2 li:hover{ 49 background-color: red; 50 } 51 </style> 52 <body> 53 <div> 54 <ul> 55 <li><a href="#"><img src="../img/1.jpg" /></a></li> 56 <li><a href="#"><img src="../img/2.jpg" /></a></li> 57 <li><a href="#"><img src="../img/3.jpg" /></a></li> 58 <li><a href="#"><img src="../img/4.jpg" /></a></li> 59 <li><a href="#"><img src="../img/5.jpg" /></a></li> 60 </ul> 61 <ul id="ul2"> 62 <li>1</li> 63 <li>2</li> 64 <li>3</li> 65 <li>4</li> 66 <li>5</li> 67 </ul> 68 </div> 69 <script type="text/javascript" src="../js/lunbo.js" ></script> 70 </body> 71 </html>
$(document).ready(function() { setInterval(function(){ move(); },1000); $("#ul2 li").on({ "mouseover": function() { var index = $("#ul2 li").index(this); var x = $("img").eq(index).width(); $("img").eq(index).css("z-index", 2); }, "mouseout": function() { var index = $("#ul2 li").index(this); $("img").eq(index).css("z-index", 1); } }); }); var i = 0; function move(){ if(i >= 5){ i = 0; } $("img").eq(i).css("z-index",2); $("img").eq(i-1).css("z-index",1); i++; }