元素，分别用于显示大图和小图。其中，大图的每个图片使用元素来展示，小图同理。

/* CSS部分 */
.big-pic {
width: 80%;
position: relative;
margin: 0 auto;
}
.big-pic img {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}
.big-pic img:first-child {
opacity: 1;
z-index: 2; 
}
.small-pic {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center; 
}
.small-pic img {
width: 25%;
height: auto;
margin-right: 10px;
border: 2px solid #fff;
cursor: pointer; 
}
.small-pic img:last-child {
margin-right: 0; 
}

在CSS部分，我们首先对大图和小图的整体布局进行设置。可以看到，我们将大图的宽度设置为80%，并让其居中显示，使用了position:relative属性。小图则使用了flex布局使得图片居中展示。

接下来，我们对大图的每张图片进行样式设置。将其设置为绝对定位，宽度和高度均为100%，并设置opacity属性为0，使得所有的大图均不可见。然后，通过将第一张图片的opacity设置为1，并将z-index属性设置为2，来显示第一张图片。

最后，对于小图的样式，我们将所有的元素设置为25%宽度，设置了边框和指针样式，通过设置margin-right样式来设置图片间距。通过以上设置，大小图轮播切换效果就完成了。