css制作轮播图

主要通过一个展示盒子，一个图片储存盒子，展示盒子的大小即为轮播图想要展示图片的大小，或者说一个图片的大小。但储存盒子的宽度必须大一些，足够所有的图片左浮横向排列。后将储存盒子的溢出部分隐藏，再调用动画特效animation。

代码实现

container{

width: 820px;
height: 340px;
overflow: hidden;

}
.photo{

width: 4100px;
animation: switch 40s ease-out infinite;

}
.photo img{

float: left;

}
@keyframes name
{
0% { left:0px; background:red;}
50% { left:100px; background:yellow;}
100% { left:0px; background:red;}
}

js制作轮播图

let allA=document.getElementsByClassName("qqq");

let allB=document.getElementsByClassName("www");
photo=document.getElementById("allphotos");
let left=document.getElementById("left");
let right=document.getElementById("right");
let index=0;
for( let i=0;i<allA.length;i++)
    allA[i].onclick= function () {
        index=i;
        photo.style.left=-1400*i+"px";
        seta();
        allB[index].style.backgroundColor="#afafaf";

}

function seta() {
    for(let i=0;i<allA.length;i++){
      allB[i].style.backgroundColor="#e1e1e1"
    }
}
left.onclick=function () {
    if(index>0){
        index=index-1;
        photo.style.left=-index*1400+"px";
        seta();
        allB[index].style.backgroundColor="#afafaf";
}}
right.onclick=function () {
    if(index<2){
        index=index+1;
        photo.style.left=-index*1400+"px";
        seta();
        allB[index].style.backgroundColor="#afafaf";
}}

内容详解
获取图片存储容器并返回一个数组，此时每张图片即为数组里的元素，然后对图片储存容器的css样式进行修改使其左移，设置index的原因主要是方便记录现在图片所在的位置。