admin管理员组文章数量:1026989
原神官网新闻资讯轮播图——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;
}```
原神官网新闻资讯轮播图——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;
}```本文标签： 原神官网新闻资讯轮播图html，css
版权声明：本文标题：原神官网新闻资讯轮播图——html，css 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/IT/1694668635a254839.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论