|
说起图片切换，我们首先会想到定位+display：hidde的方法，然后点击某个图片时做排他然后使点击的图片显示。
下面我们来说目标伪类实现图片切换的方法，可以很简单的实现图片切换效果。
首先我们来介绍一下目标伪类。 它匹配文档URI中标识符的目标元素。
URI中的这个标识符包含一个“#”字符，后面跟着一个与文档中某个元素的id属性值匹配的标识符名称。 目标伪类选择器需要IE9以及以上，opera9.6以及以上，还有所有版本的chrome，FF，Safari都支持。
如下代码。 <!--大图--> <ul id="banner"> <li id="jd1" class="firstLi"><img src="img/jd001.jpg" alt=""></li> <li id="jd2"><img src="img/jd002.jpg" alt=""></li> <li id="jd3"><img src="img/jd003.jpg" alt=""></li> <li id="jd4"><img src="img/jd004.jpg" alt=""></li> <li id="jd5"><img src="img/jd005.jpg" alt=""></li> <li id="jd6"><img src="img/jd006.jpg" alt=""></li> </ul> <!--小图列表--> <ul id="list"> <li><a href="#jd1"><img src="img/jd001.jpg" alt=""></a></li> <li><a href="#jd2"><img src="img/jd002.jpg" alt=""></a></li> <li><a href="#jd3"><img src="img/jd003.jpg" alt=""></a></li> <li><a href="#jd4"><img src="img/jd004.jpg" alt=""></a></li> <li><a href="#jd5"><img src="img/jd005.jpg" alt=""></a></li> <li class="las ；tLi"><a href="#jd6"><img src="img/jd006.jpg" alt=""></a></li> </ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
#banner li:target{ z-index: 2; }当我们点击的锚链接以#banner中的li元素所具有的ID为目标值时，相应的li层级提升，实现了图片切换的效果。
| 
收藏
淘帖
踩
