卡盤,也就是幻燈片,它應(yīng)該是自動播放,但目前css是無法做到自動播放(可能會讓你失望),所以它不應(yīng)該叫幻燈片,但我扔這么稱呼它為幻燈片。如果你認為可以用腳本來實現(xiàn),嗯,地球人都知道,顯然違背了我們的主題,純css的,無侵入的。似乎我標題黨了,但請你耐下性子來聽我說。
今天無意在經(jīng)典論壇看到一個帖子,純CSS的圖片展示效果,它是利用錨點來實現(xiàn),創(chuàng)意非常好,但馬上令我興奮,因為該效果有缺點。
Opera無效
無法記錄狀態(tài)
沒有hover效果
這些正是我想說的,我想補充的。
首先,我們讓它來兼容所有A級瀏覽器。其實原理很簡單,既然使用錨點,我們應(yīng)該記得css3有個偽類:target(非IE內(nèi)核瀏覽器都支持),讓它來控制,不就更好?
<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,實現(xiàn)記錄狀態(tài),那我們同樣可以用偽類:target來實現(xiàn),IE系列瀏覽器不支持。
<style>
/* 省略一些css,下面這行是最關(guān)鍵的 */
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>
新聞熱點
疑難解答