卡盘,也就是幻灯片,它应该是自动播放,但目前css是无法做到自动播放(可能会让你失望),所以它不应该叫幻灯片,但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现,嗯,地球人都知道,显然违背了我们的主题,纯css的,无侵入的。似乎我标题党了,但请你耐下性子来听我说。
今天无意在经典论坛看到一个帖子,纯CSS的图片展示效果,它是利用锚点来实现,创意非常好,但马上令我兴奋,因为该效果有缺点。
Opera无效
无法记录状态
没有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>
新闻热点
疑难解答