CSS中banner左右切换是网页设计中一种非常常见的效果，通过CSS技术可以轻松实现。

.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类代表整个轮播图，overflow:hidden隐藏了超出banner宽度的内容，prev类与next类分别代表左右切换按钮。btn类代表轮播图底部按钮，span类代表单个按钮，active类代表当前展示的图片对应的按钮。

使用JavaScript实现轮播图的自动播放，可以通过定时器setInterval()来实现。

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');
//自动播放函数
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);
}
//鼠标悬停暂停自动播放
banner.onmouseover = function() {
clearInterval(timer);
}
banner.onmouseout = function() {
autoPlay();
}
//初始化
autoPlay();

通过上面的代码，在HTML中添加轮播图所需的DOM结构，即可实现一个左右切换的轮播图效果。