打造纯CSS的无侵入的卡盘（幻灯片）

卡盘，也就是幻灯片，它应该是自动播放，但目前css是无法做到自动播放（可能会让你失望），所以它不应该叫幻灯片，但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现，嗯，地球人都知道，显然违背了我们的主题，纯css的，无侵入的。似乎我标题党了，但请你耐下性子来听我说。

今天无意在经典论坛看到一个帖子，纯CSS的图片展示效果，它是利用锚点来实现，创意非常好，但马上令我兴奋，因为该效果有缺点。

1. Opera无效


2. 无法记录状态


3. 没有hover效果

这些正是我想说的，我想补充的。

首先，我们让它来兼容所有A级浏览器。其实原理很简单，既然使用锚点，我们应该记得css3有个伪类:target（非IE内核浏览器都支持），让它来控制，不就更好？

<style>
.macji ul{
    width:250px;
    height:260px;
    overflow:hidden;
}
#b:target{
    margin:-260px 0 0;
}
#c:target{
    margin:-520px 0 0;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
        </li>
        <li id="b">
            <img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
        </li>
        <li id="c">
            <img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" />
        </li>
    </ul>
    <ol>
        <li><a href="#a">a</a></li>
        <li><a href="#b">b</a></li>
        <li><a href="#c">c</a></li>
    </ol>
</div>

测试地址

问题2，实现记录状态，那我们同样可以用伪类:target来实现，IE系列浏览器不支持。

<style>
/*  省略一些css，下面这行是最关键的  */
a.item:hover, :target a.item{
	background:#f60;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <a href="#a" class="item">1</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" /></a>
        </li>
	<li id="b">
            <a href="#b" class="item">2</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
        </li>
        <li id="c">
            <a href="#c" class="item">3</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
        </li>
    </ul>
</div>

测试地址

最后一个问题，hover效果，这可不是简单的:hover就可以实现，我们不能在li上给hover（这样当鼠标经过li就hover了），我们只能在数字上hover（<a href="#a" class="item">1</a>）然后来影响它对于的图片，貌似不可能纯CSS实现，但确实可以实现，用“ + ”来实现。由于用到:target和“+”，所以只有Firefox、Opera支持。-__-

<style>
.macji{
	position:relative;
}
.macji ul{
	width:250px;
	height:260px;
	overflow:hidden;
}
ul li{
	height:260px;
}
.macji a{
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}
a.item{
	z-index:10!important;
	left:10px;
	top:230px;
	display:block;
	width:20px;
	height:20px;
	border:solid 1px #777;
	line-height:20px;
	text-align:center;
	color:#fff;
	background:#aaa;
}

#b a.item{
	left:31px;
}
#c a.item{
	left:51px;
}
a.item:hover,:target a.item{
	background:#f60;
}
#a:target a.pic,#b:target a.pic,#c:target a.pic{
	z-index:3;
}
/* 原理是用绝对定位z-index来显示，另 “ + ” 只对节点的下一个兄弟节点有效 */
a.item:hover + a.pic{
	z-index:9!important;
}
/* for ie */
a.pic{
	* position:static;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <a href="#a" class="item">1</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
        </li>
        <li id="b">
            <a href="#b" class="item">2</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a>
        </li>
        <li id="c">
            <a href="#c" class="item">3</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
        </li>
    </ul>
</div>

最终演示，代码实现是很简单，关键是是否联想到原理。举一反三，将会得到更多你想要的结果。不知不觉已是国庆节了，祝大家节日快乐！

扩展阅读：css3伪类:target