時(shí)下網(wǎng)頁設(shè)計(jì)中，圖片滾動(dòng)廣告可以是頁面焦點(diǎn)，也許有時(shí)我們需要制作一個(gè)左右滾動(dòng)的圖片展示，這時(shí)候css就是解決方案了。

<style>/* 定義圖片容器樣式 */
.img-box {
width: 500px;
height: 280px;
margin: 20px auto;
position: relative;
}
/* 定義圖片列表樣式，設(shè)置絕對(duì)定位，并設(shè)置left屬性，使之排列在圖片容器中 */
.img-list {
width: 2000px;
position: absolute;
left: 0;
}
/* 定義每張圖片樣式，設(shè)置float屬性并為了美觀增加margin-right */
.img-item {
float: left;
width: 500px;
height: 280px;
margin-right: 20px;
}
/* 定義左右按鈕樣式 */
.prev, .next {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
background-color: #fff;
z-index: 99;
cursor: pointer;
opacity: 0.5;
}
/* 按鈕樣式hover狀態(tài)，改變透明度 */
.prev:hover, .next:hover {
opacity: 1;
}
/* 左右按鈕定位 */
.prev {
left: 0;
}
.next {
right: 0;
}
/* 隱藏滾動(dòng)條，使圖片輪播更美觀 */
::-webkit-scrollbar {
display: none;
}
</style><div class="img-box"><ul class="img-list"><li class="img-item"><img src="img1.jpg" alt="img1"></li><li class="img-item"><img src="img2.jpg" alt="img2"></li><li class="img-item"><img src="img3.jpg" alt="img3"></li><li class="img-item"><img src="img4.jpg" alt="img4"></li><li class="img-item"><img src="img5.jpg" alt="img5"></li><li class="img-item"><img src="img6.jpg" alt="img6"></li></ul><span class="prev"></span><span class="next"></span></div>

使用以上代碼，可以制作一個(gè)簡(jiǎn)單的圖片左右滾動(dòng)的展示。