網(wǎng)頁制作過程中少不了輪播圖的使用，為了使banner圖在不同分辨率的屏幕上都能通屏顯示，我們會把banner圖做成2000像素的寬度。

一般將banner寫成如下結(jié)構(gòu)：

為了讓banner圖左右居中顯示，我們可以給

那么，為了解決這種情況的發(fā)生，我們采用另一種更為合適的方法。這需要將banner寫成如下結(jié)構(gòu)：

利用背景圖的方式將圖片嵌入，通過設(shè)置背景圖片居中就可以簡單解決，同時需要注意的是必須給包含該背景屬性的

.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值、控制按鈕的樣式等可根據(jù)實際情況自行修改。另外，我們要引入一個在線的開放的js函數(shù)庫開做切換效果，引入語句如下：

要真正實現(xiàn)輪播效果，還需要以下語句：