原神官网新闻资讯轮播图——html，css

原神官网新闻资讯轮播图——html，css

通过使用swiper插件实现原神新闻资讯轮播图

先来看看效果

用到了swiper的js插件，比较方便，参考了原神官网，发现官网也是使用了swiper

下面上代码

<div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><a href=""><img src="./images/须弥.jpg" alt=""></a></div>
                        <div class="swiper-slide"><a href=""><img src="./images/海岛.jpg" alt=""></a></div>
                        <div class="swiper-slide"><a href=""><img src="./images/小鹿.jpg" alt=""></a></div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="prev"></div>
                    <div class="next"></div>
                </div>
                <script>        
                    var mySwiper = new Swiper ('.swiper-container', {
                        effect : 'fade',//渐入渐出
                        autoplay: true, // 自动播放
                        autoplay:{delay:3000},//每张图片显示的时间
                        loop: true, // 循环模式选项
                        
                        // 如果需要分页器
                        pagination: {
                          el: '.swiper-pagination',
                          clickable: true, //配置点击切换效果
                        },
        
                        // 如果需要前进后退按钮
                        navigation: {
                          nextEl: '.next',
                          prevEl: '.prev',
                        },
                    })        
                    evant
                </script>

css

.swiper-container{
    width: 640px;
    height: 400px;
    position: relative;
}
.swiper-slide>a>img{
    width: 640px;
    height: 400px;
}
.swiper-pagination{
    position: absolute;
    left: 0px;
    width: 592px;
    text-align: center;
    transition: all 0.3s;
}```