黑马程序员技术交流社区

标题: 【上海校区】通过目标伪类实现图片切换 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-8-21 09:23
标题: 【上海校区】通过目标伪类实现图片切换

说起图片切换，我们首先会想到定位+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;        }

• 1
• 2
• 3
  

当我们点击的锚链接以#banner中的li元素所具有的ID为目标值时，相应的li层级提升，实现了图片切换的效果。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2