数字键切换图片

目的：通过数字键实现切换图片功能。

思路：首先要有两个容器来放置图片（这里用数字来代替）和数字编码，并设置相应的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>

<head>

<title>数字键切换图片</title>

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>

</ul>

<ol>

</ol>

</div>

$("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后的显示效果：