网易云音乐首页之轮播图的实现(swiper的用法)"/>
CSS——网易云音乐首页之轮播图的实现(swiper的用法)
前言
今天要和大家分享的是网易云音乐首页中轮播图区域的实现过程
提示:以下是本篇文章正文内容,下面案例可供参考
一、结构的分析
这里是使用swiper插件实现轮播图,关于swiper插件的用法在以往的文章中有讲到过,对是哦也使用方法太明白的同学可以翻阅查看一下。关于结构的划分大概可分为如下几个部分
示例图:
二、实现过程
1.HTML结构
代码如下(示例):
<!-- 轮播图区域 --><div class="outer"><div class="swiper-inner"><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="../img/首页图库/banner1.jpg" alt=""></div><div class="swiper-slide"><img src="../img/首页图库/banner2.jpg" alt=""></div><div class="swiper-slide"><img src="../img/首页图库/banner3.jpg" alt=""></div><div class="swiper-slide"><img src="../img/首页图库/banner4.jpg" alt=""></div><div class="swiper-slide"><img src="../img/首页图库/banner5.jpg" alt=""></div><div class="swiper-slide"><img src="../img/首页图库/banner6.jpg" alt=""></div><div class="swiper-slide"><img src="../img/首页图库/banner7.jpg" alt=""></div><div class="swiper-slide"><img src="../img/首页图库/banner1.jpg" alt=""></div><div class="swiper-slide"><img src="../img/首页图库/banner2.jpg" alt=""></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev prev"></div><div class="swiper-button-next next"></div></div><script>var mySwiper = new Swiper('.swiper', {autoplay: true,loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},}) </script><!-- 下载客户端区域 --><div class="download-app"><a href="./download.html" id="btn"></a><p>PC 安卓 iPhone WP iPad Mac 六大客户端</p></div></div></div>
2.CSS样式
代码如下(示例):
/* 轮播图区域样式 */.outer {width: 100%;height: 285px;background-image: url(../img/首页图库/background-image2.jpg);}.swiper-inner {position: relative;width: 984px;height: 285px;margin: 0 auto;}.swiper {width: 100%;height: 285px;overflow: hidden;}.swiper-wrapper>div>img {width: 730px;height: 285px;}.prev {position: absolute;left: -68px;top: 50%;display: block;width: 37px;height: 63px;background-image: url(../img/首页图库/首页轮播图.png);background-position: 0 -360px;}.prev:hover {background-image: url(../img/首页图库/首页轮播图.png);background-position: 0 -430px;}.next {display: block;position: absolute;top: 50%;margin-top: -31px;width: 37px;height: 63px;right: -68px;background-image: url(../img/首页图库/首页轮播图.png);background-position: 0 -508px;}.next:hover{background-image: url(../img/首页图库/首页轮播图.png);background-position: 0 -578px;}.download-app {position: absolute;top: 0;left: 730px;width: 254px;height: 285px;background-image: url(../img/首页图库/download.png);z-index: 20;border-left: 1px solid #292725;border-right: 1px solid #292725;}.download-app>#btn {display: inline-block;width: 215px;height: 56px;margin: 186px 0 0 19px;}.download-app>#btn:hover {background-image: url(../img/首页图库/download.png);background-position: 0 -290px;}.download-app p {margin: 10px 0px;color: #8d8d8d;text-align: center;font-size: 12px;}
总结
以上就是今天所要分享的内容,依旧诚挚祝福屏幕前的你平安喜乐,健康幸福
更多推荐
CSS——网易云音乐首页之轮播图的实现(swiper的用法)
发布评论