CSS中的banner图片切换是网站设计中常用的一种效果，可以使页面更加吸引人。接下来我们将介绍如何实现banner图片切换的效果。

/*HTML代码*/
<div class="banner">
<img src="img/banner1.jpg">
<img src="img/banner2.jpg">
<img src="img/banner3.jpg">
</div>
/*CSS代码*/
.banner{
width: 800px;
height: 400px;
overflow: hidden;
position: relative;
}
.banner img{
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 400px;
}

在HTML中，我们先用一个div容器包含三张图片。在CSS中，我们给div容器设置宽高以及overflow:hidden属性，将图片容器的溢出部分隐藏。而每一张图片则使用绝对定位，将它们定位到容器的左上角。

/*CSS代码*/
.banner{
/*...*/
}
.banner img{
/*...*/
opacity: 0;
transition: opacity 1s;
}
.banner img.active{
opacity: 1;
}

在CSS中，我们设置图片切换的过渡效果。当图片发生变化时，由于之前已经将图片的透明度设置为0，所以我们只需要将当前显示的图片的透明度设置为1即可。

/*JS代码*/
var imgs = document.querySelectorAll(".banner img");
var len = imgs.length;
var index = 0;
setInterval(function(){
imgs[index].classList.remove("active");
index = (index+1)%len;
imgs[index].classList.add("active");
},3000);

在JavaScript中，我们使用定时器对图片进行切换。我们先获取容器中所有的图片，通过一个定时器，每隔3秒将图片逐渐切换。也就是先将当前显示的图片隐藏，然后将下一张图片显示，直到切换到最后一张图片时，又重新从头开始循环。

通过组合使用CSS和JavaScript，我们可以在网站中实现一些动态效果，使页面更加活跃生动，增加用户的体验感。