原神官网新闻资讯轮播图——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相关推荐

仿造网易云音乐轮播图
这几天忙着毕业设计,其中一个页面需放上轮播图,遂听着音乐在网上寻(chao)找(xi)灵(an)感(li),猛地发现原来网易云音乐客户端的轮播图就非常好看,所以就尝试着模仿了一个,虽然十分简陋,但好在 ...
html新闻轮播插件,jQuery新闻类轮播图插件sliderBox
sliderBox.js是一款jQuery新闻类轮播图插件.该jQuery新闻类轮播图插件可以创建兼容ie8.带缩略图导航.以及多种过渡效果的轮播图. 使用方法在页面中引入jQuery.slider ...
轮播图：小米官网同款轮播图，拿走它让你的网页酷酷的～
下面是我闲暇时总结的JS.CSS.算法总结,欢迎大家点赞.star-- 有趣实用的CSS效果前端博客传送门 LeetCode个人题解传送门最近一直再看基础知识,打算将基础知识与实力结合起来,第 ...
仿网易云官网轮播图 html+css+js
效果: 可自动轮播,左右箭头按钮和下方小圆点可切图,鼠标移入时停止自动轮播. 视频演示: [html+css+js]仿网易云轮播图实现(后面有完整源码): 1. 定义标签,看注释: <!-- ...
微信小程序网易云音乐轮播图右侧留白
效果图这个效果需要用到swiper里面的一个方法next-margin 使用如下: <swiper class="topListSwiper" next-margin='5 ...
element ui走马灯实现网易云音乐轮播图
记录一下做项目过程中的问题: 官方文档给的卡片化走马灯而我想要的效果: 话不多说直接上代码: <el-carousel :interval="4000" type=&quo ...
原生H5实现网易云轮播图
许久不更新了,今天做一个网易云的轮播图,就像下面这样先二话不多说,贴上代码: <!DOCTYPE html> <html lang="en"> <h ...
jQueryQQ音乐动态轮播图
下面是小编用jQuery写的QQ音乐官网的动态轮播图,希望可以帮助到有需要的小伙伴先来看一下效果吧~ 分析: 静态: <div class="gedan"><d ...
新增轮播图跳转web页面、轮播、推荐歌单数据存储（简易音乐七）
新增轮播图跳转web页面.轮播.推荐歌单数据存储( 简易音乐七) 关于效果图第一步,添加引用新增数据库实体类修改fragment代码新增WebActivity页面加载网页关于本篇主 ...

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

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

css

原神官网新闻资讯轮播图——html，css相关推荐

最新文章

热门文章