网页简单轮播图的实现

这里面展示轮播图的代码用的都是最简单的CSS HTML 知识点，没有涉及JavaScript知识。

轮播图，简单说，就是外面有一个窗口，固定宽高，中间是一堆图片组成的带，然后给这个带动画效果来实现移动，当每个图片经过窗口就会被我们看见，而其他图片都被隐藏掉了，这就是轮播图。接下来代码实现：

    .Jframe {
        height: 100px;
        width: 100px;
        overflow: hidden;
    }
    .JPanel {
        width: 700px;
        height: 100px;
        animation: lunbo 2s 5s infinite linear;
    }
    .tupian {
        height: 100px;
        width: 100px;
        display: inline-block;
    }
    .margin1{
        margin-left: -5px;
    }
    @keyframes lunbo {
        0%{
            transform: translateX(0px);
        }
        25%{
            transform: translateX(-100px);
        }
        50%{
            transform: translateX(-200px);
        }
        75%{
            transform: translateX(-300px);
        }
        100%{
            transform: translateX(-400px);
        }
    }

 

 能实现这样的效果，但是这样会出现图片倒回的情况，这时候就需要我们在最后一个图片div块后面加一个第一个图片div块，然后就能实现真正的轮播效果了。

animation 里 infinite 意思为永久轮播，如果不写默认之播一次。linear 是线性播放。

具体要让图片停留时间长一点，移动的时间短一点，就需要通过调节@keyframes 里 百分比 。