<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易的轮播</title> <style> *{ margin:0px; padding:0px;} #box{ width:100%; height:280px; position:relative; overflow:hidden; /*若不加这句隐藏，几张图片将纵向叠加*/ } #box ol{ position:absolute; bottom:10px; left:47% } ul,ol{ list-style:none;} #box ol li{ border-radius:7px; /* css新特性（圆角）这样活生生将ol方形切成了圆形，px超过方形0.5边长就是一个圆了*/ width:10px; height:10px; float:left; background-color:#666; margin:5px; opacity: 0.4; /*这里透明度设置会好看一丢丢*/ border:#666 1PX solid; line-height:20px; text-align:center; cursor:pointer; /*手型*/ } #box ol li.current{ background-color:#09F; } img{ width: 100%; height: auto; } </style> </head> <body> <div id="box"> <ul> <li><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_2.jpg"></li> <li><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_3.jpg"></li> <li><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_6.jpg"></li> <li><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_5.jpg"></li> </ul> <ol> <li class="current"></li> <li></li> <li></li> <li></li> </ol> </div> </body> </html> <script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script> <script> $(document).ready(function(){ $("#box ol li").mouseover(function(event){ var index=$(this).index();//获取当前索引值 $("#box ul li").eq(index).fadeIn().siblings().hide();//当前的eq个图淡入fadein，其他图隐藏 $(this).addClass('current').siblings().removeClass('current'); //鼠标放在哪个点上，哪个点实现current的css特性，此时其他点移除这个特性 }) }); </script>