通过swiper 仿百度音乐中的热门歌单,鼠标经过图片放大,并且有一个播放图标。
我通过hover 已经实现鼠标经过图片放大,但是无法实现同时图片放大,显示播放图标。我尝试播放图标也使用hover,但是播放图标虽然可以显示,鼠标经过图片放大就失效了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--swiper框架样式-->
<link rel="stylesheet" type="text/css" href="https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/css/swiper-3.4.2.min.css" />
<!--主要样式-->
<style>
@charset "utf-8";
/*
* 17素材vip建站专区模块代码
* 详尽信息请看官网:http://www.17sucai.com/pins/vip
*
* Copyright , 温州易站网络科技有限公司版权所有
* 图片不能商用,代码可商用。
* 请尊重原创,未经允许请勿转载。
* 在保留版权的前提下可应用于个人或商业用途
*/
*{padding: 0;margin: 0;font-family: "微软雅黑";box-sizing: inherit;outline: none;}
:after, :before{box-sizing: inherit;}
a{text-decoration: none;color: inherit;}
ul{list-style: none;}
.pc-bg-container{background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; padding-top: 20px;}
.home-market-section{text-align: center;}
/*标题*/
/*内容盒子*/
.home-market-section .section-inner{position: relative; max-width: 1200px; margin: 0 auto;}
.home-market-section .section-inner .swiper-container{height: 364px; max-width: 1200px;}
.home-market-section .section-inner .swiper-container .swiper-wrapper{align-items: center; height: 279px!important;}
/*内容列表*/
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide{height: 279px!important; background: 0 0;box-sizing: border-box; text-align: center;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a{display: block; float: left; position: relative; background-color: #fff;width: calc((100% - 80px)/ 5); height: 100%; margin-right: 20px;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide .poster{width: 224px;height: 224px;overflow: hidden; position: absolute;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide img{width:224px;height: 224px; transition: all .5s ease-out;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide img:hover{transform: scale(1.1);}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide h3{font-weight: normal; font-size: 16px; margin-top: 18px; color: #252b3a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide p{font-size: 14px; color: #a0a2a8; margin-top: 6px; text-align: center; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a:last-of-type{margin-right: 0;}
/*分页*/
.home-market-section .section-inner .swiper-container .swiper-pagination-bullets{bottom: 20px;}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet{position: relative; margin: 0 5px; width: 24px; height: 4px; border-radius: 100px; opacity: 1; background: 0 0;}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet:before{content: ''; display: inline-block; position: absolute; width: 24px!important; height: 4px; opacity: 1; left: 0; border-radius: 100px; background: #e2e3e4; vertical-align: middle; transition: opacity .8s,background-color .8s;}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet-active{opacity: 1;}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet-active:before{width: 24px!important; opacity: 1; border-radius: 100px; transform: scale(1.2);background: linear-gradient(39deg, #b08cf9,#9a9ef5, #91a5f4);}
/*左右箭头*/
.home-market-section .section-inner .swiper-button-prev{left: -50px; top: 118px; margin-top: 0; background: url(https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/images/marketplace-home-arrow_big.svg);}
.home-market-section .section-inner .swiper-button-next{right: -50px; top: 118px; margin-top: 0; background: url(https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/images/marketplace-home-arrow_big.svg); transform: rotate(180deg);}
.home-market-section .section-inner .swiper-button-next:hover{background: url(https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/images/marketplace-home-arrow_big.svg);}
.home-market-section .section-inner .swiper-button-prev:hover{background: url(https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/images/marketplace-home-arrow_big.svg);}
</style>
<!--jquery框架-->
<script src="https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="pc-bg-container">
<div class="home-market-section">
<div class="section-inner">
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<!--下文中的data-swiper-parallax属性是swiper的视差效果,如果觉得污染代码,可以删除-->
<div class="swiper-slide">
<a href="123.html" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="images/1.jpg">
</div>
<div class="playico"></div>
<h3>抖音热歌盘点</h3>
<p>2021/6/1</p>
</div>
</a>
<a href="123.html" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://imgessl.kugou.com/custom/150/20200611/20200611053851105092.jpg"></div>
<h3>Hot!最全Hi-Res抖音热歌</h3>
<p>2021/6/1</p>
</div>
</a>
<a href="123.html" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://imgessl.kugou.com/custom/150/20201025/20201025150514203939.jpg"></div>
<h3>KTV必点热歌:90后麦霸都爱唱这些</h3>
<p>2021/6/1</p>
</div>
</a>
<a href="123.html" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://p3fx.kgimg.com/soft/collection/150/20201224/20201224111023504746.jpg"></div>
<h3>2021中文DJ热曲推荐【更新中】</h3>
<p>2021/6/1</p>
</div>
</a>
<a href="123.html" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://imgessl.kugou.com/custom/150/20201027/20201027221648889189.jpg"></div>
<h3>劲爆DJ热歌:强劲节奏 动感狂嗨</h3>
<p>2021/6/1</p>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="123.html" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://p3fx.kgimg.com/soft/collection/150/20210416/20210416170204745561.jpg"></div>
<h3>华语热歌:流行节奏,一键GET</h3>
<p>2021/6/1</p>
</div>
</a>
<a href="123.html" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://imgessl.kugou.com/custom/150/20201108/20201108161447499862.jpg"></div>
<h3>经典粤语300首:回忆不朽经典</h3>
<p>2021/6/1</p>
</div>
</a>
<a href="123.html" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://imgessl.kugou.com/custom/150/20200706/20200706101457579499.jpg"></div>
<h3>红歌DJ版:火速围观跟随潮流</h3>
<p>2021/6/1</p>
</div>
</a>
<a href="123.html" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://p3fx.kgimg.com/soft/collection/150/20201119/20201119180213968878.jpg"></div>
<h3>车载中文DJ:一路前行为了TA</h3>
<p>2021/6/1</p>
</div>
</a>
<a href="123.html" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<div class="poster">
<img src="https://imgessl.kugou.com/custom/150/20201217/20201217152229300351.jpg"></div>
<h3>我对你又何止是执迷不悟</h3>
<p>2021/6/1</p>
</div>
</a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<script src="https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
new Swiper(".pc-bg-container .home-market-section .swiper-container", {
loop: !0,
speed: 500,
slidesOffsetBefore: 0,
parallax: !0,
pagination: {
el: ".pc-bg-container .swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
})
});
</script>
</body>
</html>
请大神给一个指导思路。ps:学生党,充值至少100,无奈,留微信二维码打赏。