制作轮播图的几种方式

css制作轮播图

思路

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

animation详解

@keyframes指动画过程中每一个画面，也可以说是电影中的每一帧。我们可以设置0到100%的每个画面。

具体制作

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制作轮播图

思路

思路与css类似，但是没有调用css3中的动画，而是通过js获取并修改css的样式使其左移。

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的原因主要是方便记录现在图片所在的位置。