目的：通过数字键实现切换图片功能。
思路： 首先要有两个容器来放置图片（这里用数字来代替）和数字编码，并设置相应的Css样式，样式设置时需要注意ol的定位父级是div,同时div还应该设置超出部分隐藏， 数字键的样式要通过 cursor: pointer;呈现手指状，这样基本样式就出来了，接下来是jQuery部分，点击数字键1图片1显示，点击数字键2图片2显示……这时候需要有一个click事件，另外数字键的index值和图片的index值相同，可以把数字键的index值赋值给ul 下的li，这用到$("ul li").eq($(this).index()).show();现在可以实现一次点击数字键出现一次图片，不刷新的情况下不能实现其余的数字键，因为div点击一次后一直被占用没办法清除，这就用到一个思想，想让谁显示，先把同类的都隐藏，在这里对ul下的li 设置为隐藏，当前这个点击的显示就可以；这里会遇到数字键的类无法改变，所以还需要用同样的思想先把类都移除在给当前的添加上类，就可以了。最后，因为给ul li 设置display：none；所以默认画面效果是图片1不会显示，所以最后需要加上一行代码$("ul li").first.show();让第一张图片显示出来。
代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>数字键切换图片</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="list.css" rel="stylesheet" type="text/css"/> <link href="reset.css" rel="stylesheet" type="text/css"/> <style type="text/css"> div{ 500px; height: 500px; position:relative; margin:0 auto; overflow: hidden; } ul{ 500px; height: 500px; line-height: 500px; text-align: center; font-size: 200px; color: #fff; background: #00ff00; } ul li{ display: none; } ol { 500px; height:30px; position: absolute; bottom: 10px;
} ol li{ 30px; line-height: 30px; text-align: center; font-size: 20px; color: #fff; background: #000; float: left; margin: 0 10px; cursor: pointer; } .sh{ background: #fff; color:red; } </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <ol> <li class="sh">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> </div> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("ol li").click(function () { $("ol li").removeClass("sh"); $(this).addClass("sh"); $("ul li").hide(); $("ul li").eq($(this).index()).show(); }); $("ul li").first().show(); </script>
</body> </html> |
运行后初始效果：
点击数字键5后的显示效果：
