網頁制作過程中少不了輪播圖的使用，為了使banner圖在不同分辨率的屏幕上都能通屏顯示，我們會把banner圖做成2000像素的寬度。
一般將banner寫成如下結構：
為了讓banner圖左右居中顯示，我們可以給
那么，為了解決這種情況的發生，我們采用另一種更為合適的方法。這需要將banner寫成如下結構：
利用背景圖的方式將圖片嵌入，通過設置背景圖片居中就可以簡單解決，同時需要注意的是必須給包含該背景屬性的
加寬高屬性，否則背景圖片將無法正常顯示。給上述.banner{ height:490px;}
.banner li{ height:490px; width:100%; position:absolute; top:223px;}
.banner .ctrl{ position:absolute; top:690px; left:50%;}
.banner .ctrl p{ width:8px; height:8px; border-radius:50%; border:1px solid black; float:left; margin-right:7px;}
.banner .ctrl .cur{ width:10px; height:10px; border:none; background-color:#00ad3e;}
以上樣式屬性的高度值、定位中的top值、控制按鈕的樣式等可根據實際情況自行修改。另外，我們要引入一個在線的開放的js函數庫開做切換效果，引入語句如下：
要真正實現輪播效果，還需要以下語句：
下一篇： 如何在頁面獲取系統當前時間？
關鍵詞:
