网易云音乐官网点这里
原版:
自己做的:
和原版相比,没有切换图片时的渐隐渐显效果。
HTML部分:
左右箭头图标:阿里巴巴矢量图标库
下方选中的白色圆点使用JS自动添加
<div class="container">
<div class="bgbox"></div>
<div class="picbox">
<div class="pic">
<div class="lis">
</div>
</div>
<div class="download">
<div class="downbutton"></div>
</div>
<div class="icon left">
<i class="iconfont"></i>
</div>
<div class="icon right">
<i class="iconfont"></i>
</div>
</div>
</div>
CSS部分:
右方下载框部分由图片代替
在浏览器窗口小于1110px时,将箭头往里面靠一些。
@font-face {
font-family: 'iconfont'; /* project id 2257156 */
src: url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.eot');
src: url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.woff') format('woff'),
url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:36px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
*{margin: 0;padding: 0;}
body{
height: 100vh;width: 100vw;
}
.container{
width: 100%;height: 300px;
position: relative;
overflow: hidden;
}
.bgbox{
position: absolute;
width: 200%;height: 200%;
z-index: 1;
background-position: center center;
background-size: 4000px;
background-image: url(/css/17_网易云轮播图/cloudimg/1.jpg);
filter: blur(20px);
}
.container .picbox {
position: relative;
width: 100%;max-width: 1000px;min-width:1000px;height: 300px;
margin: 0 auto;
z-index: 2;
}
.container .picbox .download{
float: left;
width: 25%;height: 100%;
background-image: url(/css/17_网易云轮播图/cloudimg/downpic.png);
background-size: cover;
background-position: center center;
box-shadow: 1px 0px 1px #000;
}
.container .picbox .download .downbutton{
position: absolute;
width: 220px;height: 55px;
cursor: pointer;
bottom: 45px;
margin: 0 15px;
}
.container .picbox .pic{
float: left;
position: relative;
width: 750px;height: 100%;
background-image: url(/css/17_网易云轮播图/cloudimg/1.jpg);
background-size: 105%;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
.container .picbox .pic .lis{
position: absolute;
width: 740px;height: 30px;
bottom: 5px;
background-color: #ffffff44;
text-align: center;
line-height: 30px;
}
.container .picbox .pic .lis .items{
display: inline-block;
width: 8px;height: 8px;
margin: 0 10px;
border-radius: 100%;
background-color: #fff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
cursor: pointer;
z-index: 4;
}
.container .picbox .pic .lis .items:hover{
background-color: red;
}
.container .picbox .pic .lis .items.checked{
background-color: red;
}
.icon.left,.icon.right{
font-size: 36px;
position: absolute;
width: 40px;height: 60px;
color: #fff;
top: 50%;transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
transition: all .3s;
cursor: pointer;
z-index: 3;
}
.icon.left{
left: -60px;
}
.icon.left:hover{
background-color: rgba(0, 0, 0, .2);
}
.icon.right{
right: -60px;
}
.icon.right:hover{
background-color: rgba(0, 0, 0, .2);
}
@media screen and (max-width:1110px){
.icon.left{
left: 20px;
}
.icon.right{
right: 20px;
}
}
JS部分:
创建白色圆点时设置自定义属性index,根据index来决定显示显示哪一张图片。
var links =[
{'image':'./cloudimg/1.jpg'},
{'image':'./cloudimg/109951165537616198.jpg'},
{'image':'./cloudimg/109951165537626620.jpg'},
{'image':'./cloudimg/109951165537687380.jpg'},
{'image':'./cloudimg/109951165538182770.jpg'},
];
var currentIndex = -1;
let Timer = null;
let container = document.querySelector('.container');
let lis = document.querySelector('.lis');
let pic = document.querySelector('.pic');
let bg = document.querySelector('.bgbox');
let left = document.querySelector('.icon.left');
let right = document.querySelector('.icon.right');
let Init__=function(){
for(let i=0;i<links.length;i++)
{
let item = document.createElement('a');
item.setAttribute('class','items');
item.setAttribute('href','#');
item.setAttribute('data-index',i);
lis.appendChild(item);
}
};
let select=function(index){
index = Number(index);
// 越界超过 最大数量 links越界,直接返回
if (index >= links.length) {
return;
}
// 选中当前已选中的的直接返回
if (currentIndex == index) {
return;
}
// 取消当前的指示点选中状态
if (currentIndex > -1) {
lis.children[currentIndex].classList.remove('checked');
}
currentIndex = index;
currentLink = links[currentIndex];
bg.style.backgroundImage = 'url(' + currentLink.image + ')';
pic.style.backgroundImage = 'url(' + currentLink.image + ')';
lis.children[currentIndex].classList.add('checked');
};
let pic_play = function(){
// 3000 执行1次
Timer = setInterval(() => {
// 获取新的index
let index = currentIndex + 1;
// 右翻越界等于最左侧元素
if (index >= links.length) {
index = 0;
}
select(index);
}, 3000);
}
let pic_stop =function(){
if (Timer) {
clearInterval(Timer);
Timer = null;
}
}
window.addEventListener('load', () => {
Init__();
select(0);
bind();
pic_play();
});
let bind = function(){
left.addEventListener('click',function(){
let index = currentIndex - 1;
if (index < 0) {
index = links.length - 1;
}
select(index);
});
right.addEventListener('click',function(){
let index = currentIndex + 1;
if (index >= links.length) {
index = 0;
}
select(index);
});
for(let i in lis.children){
if(lis.children.hasOwnProperty(i))
{
lis.children[i].addEventListener('click', function(e){
e.preventDefault();
select(e.target.dataset.index);
console.log(e);
});
}
}
// 绑定鼠标移入事件
container.addEventListener('mouseover', () => {
// 防止鼠标从子元素移出时触发
pic_stop();
});
// 绑定鼠标移出事件
container.addEventListener('mouseout', () => {
// 防止鼠标从子元素移出时触发
pic_play();
});
// 绑定鼠标移动事件
container.addEventListener('mousemove', () => {
pic_stop();
});
}
更多详细参考:仿制网易云音乐首页轮播图