层级轮播图:每点击一个按钮层式展出
效果:图实在是不好截,大家想象一下好了,就是一层一层展出每张图片
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} ul,ol{ list-style: none;} .wrapper{ width: 670px; height: 240px; margin: 100px auto; overflow: hidden; position: relative; } ol{ position: absolute; right: 0; bottom: 10px; width: 190px; } ol li{ float: left; width: 20px; height: 20px; margin: 0 5px; text-align: center; border-radius: 50%; cursor: default; background-color: #abc; } ol li.current{ background-color: pink; } </style>
/*最最重要的js部分*/ <script type="text/javascript" src="../jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function () { // 根据ol下li的索引号,匹配ul下相对应li的索引号 $(".wrapper ol li").mouseenter(function () { $(this).addClass("current").siblings().removeClass("current"); $(".wrapper ul li").eq($(this).index()).fadeIn("fast").siblings().fadeOut(); }); }); </script> </head> <body> <div class="wrapper"> <ul> <li><img src="images/1.jpg" alt=""/></li> <li><img src="images/2.jpg" alt=""/></li> <li><img src="images/3.jpg" alt=""/></li> <li><img src="images/4.jpg" alt=""/></li> <li><img src="images/5.jpg" alt=""/></li> <li><img src="images/6.jpg" alt=""/></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> </div> </body> </html>