最近一直在重溫純CSS，學習的時候真的才發現，css真的博大精深啊！
所以趁着學習的勁頭，謝了個最簡單的CSS圖片切換！
先整理下思路：
首先我希望圖片居中間，兩邊有個切換按鈕，點擊按鈕的時候，可以實現圖片切換！
所以，我先弄一個div盒子，讓他為頂級div所有的東西都放在他里面；
所有布局如下代碼：
<div id="allbg"> <div id="picbg"> <div id="pic1"> <img src="pic1" /> <a class="pre" href="#pic3"><b>Previous</b></a> <a class="next" href="#pic2"><b>next</b></a> </div> <div id="pic2"> <img src="images/pic2.jpg" /> <a class="pre" href="#pic1"><b>Previous</b></a> <a class="next" href="#pic3"><b>next</b></a> </div> <div id="pic3"> <img src="images/pic3.jpg" /> <a class="pre" href="#pic2"><b>Previous</b></a> <a class="next" href="#pic1"><b>next</b></a> </div> </div> </div>
這個時候，圖片應該是按着他的大小自己隨着放的；
這個時候，我們用樣式來控制：
我們可以先把圖片，之類的東西先全部去掉；
就用第一個父div；
先寫allbg的css樣式，我們先給他加上背景顏色，來觀察位置：
#allbg{ height:750px; width:650px; position:absolute; background:red; left:30%; }
這個時候我們加上picbg這個div：
#allbg #picbg{ position:absolute; text-align:center; height:750px; width:650px; overflow:hidden; background:green; }
此時，因為寬高與上面一樣，那么久會覆蓋allbg這個頂級div，顏色變成了綠色，不過我么多了行center這個，是里面的元素居中；
然后我們把圖片的三個div加進去，其中class pre 和 next 可以先不要
然后圖片就會是在div為picbg的盒子里面，由於我們還沒有設置圖片等屬性，所以圖片就是在這個盒子里面有着它自己擺放
不過有了寬高限制，所以它也只能在這個盒子里面，由於我們加了overflow=hidden這個屬性，所以超出將會被隱藏裁剪，
所以我們看到的可能是一張圖片又或者是一張圖片和另一張的一點，此刻，這個我們完全靠圖片的大小而定；
現在我們來控制裝所有圖片的盒子也就是 pic1 pic2 pic3等這樣的盒子：
#allbg #picbg div{ width:640px; height:750px; position:relative; }
這個時候裝圖片的盒子設置好了，那么圖片將多會重疊在一起，覆蓋在一起，因為我們米有指定是哪個圖片的盒子，而是所有的圖片的盒子
所以，我們看到的將會是最后一張圖片：
現在我們來把圖片的屬性設置一下，我們不管圖片的大小怎么樣了都設置為統一寬高，
這樣樣式就會好看很多，不過圖片的質量就不是我考慮的范圍了：
#allbg #picbg img{ height:600px; width:400px; overflow:hidden; }
這個時候和上一步沒有什么區別，唯一的區別就是，現在的圖片大小一模一樣了；
現在我們把兩個class加進去 來控制切換，
我們先把a 和 b先隱藏掉。因為我們要用圖片來代替它 所以它們就不需要出現了
#allbg a b{display:none;}
然后就是設置 兩個圖片的切換按鈕了：
#allbg a.pre{ position:absolute; height:40px; width:32px; background:url(images/previous.gif); top:400px; left:10px; } #allbg a.next{ position:absolute; height:40px; width:32px; background:url(images/next.gif); right:10px; top:400px; }
其中它的位置可以通過position 之后的 top right left bottom屬性來控制；
然后圖片的跳轉就可以通過#pic[num],這樣的來控制
所以整個就okay了，我們去掉背景顏色就okay了！
這個是非常簡單的css制作，沒有用到上次的jQuery來控制自己自動切換，其實也可在圖片的右下角加上一二三四等數字，然后鼠標滑動到那個數字，就顯示那個數字的圖片
這里我就不講了！
其實大家可以考慮一下，我們把最外層的allbg div盒子去掉會怎么樣？
我們通過picbg來控制圖片盒子位置不行么？
還有就是，如果我把b這個屬性去掉又會怎么樣，他是必須的么？
大家可以思考，實踐一下！
最后附上整個源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- author:EthanCoco Sina:18720989539 WeChat:dyznzyl Email:lijianlin0204@163.com --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>純CSS實現的可向前、向后的幻燈片效果</title> <style> #allbg{ height:750px; width:650px; position:absolute; left:30%; } #allbg #picbg{ position:absolute; text-align:center; height:750px; width:650px; overflow:hidden; } #allbg #picbg div{ width:640px; height:750px; position:relative; } #allbg #picbg img{ height:600px; width:400px; overflow:hidden; } #allbg a b{display:none;} #allbg a.pre{ position:absolute; height:40px; width:32px; background:url(images/previous.gif); top:400px; left:10px; } #allbg a.next{ position:absolute; height:40px; width:32px; background:url(images/next.gif); right:10px; top:400px; } </style> <head> <body> <div id="allbg"> <div id="picbg"> <div id="pic1"> <img src="images/pic1.jpg" /> <a class="pre" href="#pic3"><b>Previous</b></a> <a class="next" href="#pic2"><b>next</b></a> </div> <div id="pic2"> <img src="images/pic2.jpg" /> <a class="pre" href="#pic1"><b>Previous</b></a> <a class="next" href="#pic3"><b>next</b></a> </div> <div id="pic3"> <img src="images/pic3.jpg" /> <a class="pre" href="#pic2"><b>Previous</b></a> <a class="next" href="#pic1"><b>next</b></a> </div> </div> </div> </body> </html>
http://yunpan.cn/cmfEIKfMvF9SM （提取碼：eabb）