CSS中banner左右切換是網(wǎng)頁(yè)設(shè)計(jì)中一種非常常見(jiàn)的效果，通過(guò)CSS技術(shù)可以輕松實(shí)現(xiàn)。

.banner {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.banner img {
float: left;
width: 100%;
height: 400px;
}
.prev {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.next {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.btn span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
margin-right: 10px;
}
.btn span.active {
background: #fff;
}

以上是CSS樣式代碼，其中的banner類代表整個(gè)輪播圖，overflow:hidden隱藏了超出banner寬度的內(nèi)容，prev類與next類分別代表左右切換按鈕。btn類代表輪播圖底部按鈕，span類代表單個(gè)按鈕，active類代表當(dāng)前展示的圖片對(duì)應(yīng)的按鈕。

使用JavaScript實(shí)現(xiàn)輪播圖的自動(dòng)播放，可以通過(guò)定時(shí)器setInterval()來(lái)實(shí)現(xiàn)。

var index = 0;
var timer = null;
var banner = document.querySelector('.banner');
var imgList = document.querySelectorAll('.banner img');
var btnList = document.querySelectorAll('.btn span');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
//自動(dòng)播放函數(shù)
function autoPlay() {
timer = setInterval(function() {
index++;
if(index >= imgList.length) {
index = 0;
}
changeIndex(index);
}, 2000);
}
//切換圖片及按鈕
function changeIndex(index) {
for(var i=0; i= imgList.length) {
index = 0;
}
changeIndex(index);
}
//鼠標(biāo)懸停暫停自動(dòng)播放
banner.onmouseover = function() {
clearInterval(timer);
}
banner.onmouseout = function() {
autoPlay();
}
//初始化
autoPlay();

通過(guò)上面的代碼，在HTML中添加輪播圖所需的DOM結(jié)構(gòu)，即可實(shí)現(xiàn)一個(gè)左右切換的輪播圖效果。