我么常常看到一個網站的主界面的圖片可以切換自如，那么又是如何實現的呢？
1.HTML頁面布局如圖所示：
| Main（div）
|
2.實現上述布局
swap.html
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'><html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>在此插入標題</title><link rel="stylesheet" type="text/css" href="swap.css"/><script type="text/javascript"><!--function swap(val){ if(val=="left"){ left.style.display='block';//設置為顯示 center.style.display='none';//設置為隱藏 right.style.display='none'; }else if(val=="center"){ left.style.display='none'; center.style.display='block'; right.style.display='none'; }else if(val=="right"){ left.style.display='none'; center.style.display='none'; right.style.display='block'; } }--></script></head><body> <div class="main"> <div class="top"> <div class="left" id="left"><img src="images/left.jpg"/></div> <div class="center" id="center"><img src="images/center.jpg"/></div> <div class="right" id="right"><img src="images/right.jpg"/></div> </div> <div class="bottom"> <ul> <li onmouseover="swap('left')"></li> <li onmouseover="swap('center')"></li> <li onmouseover="swap('right')"></li> </ul> </div> </div> </body> </html>3.css的實現
swap.css
@CHARSET "UTF-8";.main{ width:1320px; height:334px; border:1px solid red; background-color:silver;}.top{ width:1300px; height:304px; margin-top: 5px; margin-left: 10px; background-color: green;}.top .left{ display: block;//讓left.jpg作為第一張圖片顯示}.top .center{ display: none;//初始狀態不顯示}.top .right{ display: none;//不顯示}.bottom{ width:1300px; height:15px; margin-top: 5px; margin-left: 10px; background-color: gray;}.bottom ul{ margin: 0px; margin-left:500px; padding: 0px; width:260px; height:50px; }.bottom ul li{ width:80px; height:10px; margin-top:3px; margin-right:3px; background-color:yellow; list-style-type: none; float:left;}4.注意的地方
（1）關于display和visibility的區別要清楚。
display:在設置none的時候不僅內容會隱藏，而且元素不會在頁面占據位置，隱藏相當于此元素暫時從頁面刪除了，不對現在頁面起任何作用。
visibility：在設置hidden的時候，雖然內容不會顯示但是，其元素任然會起作用，相當于只是把要顯示的內容用隱藏了，然而東西依然存在。用俗話就是“站著茅坑不xx”;
(2)你是想要點擊還是鼠標移動到指定位置圖片就會變換？所使用的函數當然不一樣，此處是如表移動到指定區域就會實現圖片切換，所以使用的是onmouseover()。
以上就是小編為大家帶來的利用JS實現點擊按鈕后圖片自動切換的簡單方法全部內容了，希望大家多多支持武林網~
新聞熱點
疑難解答
