网页简单轮播图的实现

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

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

    <div class="Jframe">
        <div class="JPanel">
            <div class="tupian" style="background-color: aqua;" ></div>
            <div class="tupian margin1" style="background-color:hotpink;" ></div>
            <div class="tupian margin1" style="background-color: teal;" ></div>
            <div class="tupian margin1" style="background-color: yellowgreen;" ></div>
        </div>
    </div>

    .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 里 百分比 。

最后

以上就是慈祥短靴为你收集整理的网页简单轮播图的实现的全部内容，希望文章能够帮你解决网页简单轮播图的实现所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。