246 lines
9.4 KiB
HTML
246 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||
|
||
<title>仿制网易云音乐网站的轮播图</title>
|
||
<!-- 引入字体图标 -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="../css/74.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 轮播图主体 -->
|
||
<div class="swipe" id="swipe">
|
||
<!-- 模糊背景 -->
|
||
<div class="bg" id="swipe_bg"></div>
|
||
<!-- 图片区域 -->
|
||
<section>
|
||
<!-- 图片显示 -->
|
||
<div class="img-box" id="swipe_img_box">
|
||
<a href="#" class="link" id="swipe_link">
|
||
<img src="../images/cloud_music/1.jpg" alt="" class="img" id="swipe_img">
|
||
</a>
|
||
</div>
|
||
<!-- 指示点 -->
|
||
<div class="select" id="swipe_select">
|
||
<!-- <a href="#" class="item checked"></a>
|
||
<a href="#" class="item"></a>
|
||
<a href="#" class="item"></a> -->
|
||
</div>
|
||
<!-- 左侧翻页按钮 -->
|
||
<div class="btn left" id="swipe_btn_left">
|
||
<!-- 字体图标：左箭头 -->
|
||
<i class="fa fa-angle-left" aria-hidden="true"></i>
|
||
</div>
|
||
<!-- 右侧翻页按钮 -->
|
||
<div class="btn right" id="swipe_btn_right">
|
||
<!-- 字体图标：右箭头 -->
|
||
<i class="fa fa-angle-right" aria-hidden="true"></i>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<script>
|
||
// 当前轮播图编号
|
||
let current_index=-1;
|
||
// 自动轮播定时器
|
||
let swipe_timer=null;
|
||
// 轮播图的图片地址与跳转链接
|
||
let links=[
|
||
{'image':'../images/cloud_music/1.jpg','target':'#1'},
|
||
{'image':'../images/cloud_music/2.jpg','target':'#2'},
|
||
{'image':'../images/cloud_music/3.jpg','target':'#3'},
|
||
{'image':'../images/cloud_music/4.jpg','target':'#4'},
|
||
{'image':'../images/cloud_music/5.jpg','target':'#5'},
|
||
{'image':'../images/cloud_music/6.jpg','target':'#6'}
|
||
];
|
||
|
||
// 需要操作到的元素
|
||
let swipe=document.getElementById('swipe');
|
||
let swipe_bg=document.getElementById('swipe_bg');
|
||
let swipe_img_box=document.getElementById('swipe_img_box');
|
||
let swipe_link=document.getElementById('swipe_link');
|
||
let swipe_img=document.getElementById('swipe_img');
|
||
let swipe_select=document.getElementById('swipe_select');
|
||
let swipe_btn_left=document.getElementById('swipe_btn_left');
|
||
let swipe_btn_right=document.getElementById('swipe_btn_right');
|
||
|
||
// 事件
|
||
// 切换图片
|
||
let select=(index)=>{
|
||
// 停止播放
|
||
stop();
|
||
// 转数字
|
||
index=Number(index);
|
||
// 越界超过最大数量,直接返回
|
||
if(index>=links.length){
|
||
return;
|
||
}
|
||
// 选中当前已选中的,直接返回
|
||
if(current_index==index){
|
||
return;
|
||
}
|
||
// 取消当前指示点的选中状态
|
||
if(current_index>-1){
|
||
swipe_select.children[current_index].classList.remove('checked');
|
||
}
|
||
// 变更当前轮播图的编号
|
||
current_index=index;
|
||
// 找到当前元素
|
||
let current_link=links[current_index];
|
||
// 背景变化
|
||
swipe_bg.style.backgroundImage='url('+current_link.image+')';
|
||
// 前景变化
|
||
swipe_img.setAttribute('src',current_link.image);
|
||
// 链接变化
|
||
swipe_link.setAttribute('href',current_link.target);
|
||
// 增加新的指示点的选中状态
|
||
swipe_select.children[current_index].classList.add('checked');
|
||
};
|
||
// 自动切换图片
|
||
let autoSelect=(index)=>{
|
||
// 转数字
|
||
index=Number(index);
|
||
// 越界超过最大数量，直接返回
|
||
if(index>=links.length){
|
||
return;
|
||
}
|
||
// 选中当前已选中的，直接返回
|
||
if(current_index==index){
|
||
return;
|
||
}
|
||
// 取消当前指示点的选中状态
|
||
swipe_select.children[current_index].classList.remove('checked');
|
||
// 变更当前轮播图的编号
|
||
current_index=index;
|
||
// 找到当前元素
|
||
let current_link=links[current_index];
|
||
// 前景图片
|
||
// 第一步调整过渡时间
|
||
swipe_img.style.transition='opacity 0.5s ease-in 0s';
|
||
// 第二步调整不透明度为0.2
|
||
swipe_img.style.opacity=0.2;
|
||
// 第三步延迟变换img图片，并重新定义透明度以及过渡时间和过渡方式
|
||
setTimeout(() => {
|
||
// 背景变化
|
||
swipe_bg.style.backgroundImage='url('+current_link.image+')';
|
||
// 前景变化
|
||
swipe_img.setAttribute('src',current_link.image);
|
||
// 链接变化
|
||
swipe_link.setAttribute('href',current_link.target);
|
||
// 不透明度变化
|
||
swipe_img.style.transition='opacity 0.7s ease-out 0s';
|
||
swipe_img.style.opacity=1;
|
||
// 增加新的指示点选中状态
|
||
// 如果已经通过手动点击了，选中则此处不再执行
|
||
if(!document.querySelector('.swipe .checked')){
|
||
swipe_select.children[current_index].style.transition='background-color 0.5s';
|
||
swipe_select.children[current_index].classList.add('checked');
|
||
}
|
||
}, 500);
|
||
};
|
||
// 播放
|
||
let play=()=>{
|
||
// 3秒切换一次
|
||
swipe_timer=setInterval(()=>{
|
||
// 设置新的index
|
||
let index=current_index+1;
|
||
// 右翻越界，切到第一张
|
||
if(index>=links.length){
|
||
index=0;
|
||
}
|
||
// 加载新图片（这里选择自动，增加切换效果）
|
||
autoSelect(index);
|
||
},3000);
|
||
};
|
||
// 停止
|
||
let stop=()=>{
|
||
if(swipe_timer){
|
||
clearInterval(swipe_timer);
|
||
swipe_timer=null;
|
||
}
|
||
};
|
||
// 初始化
|
||
let init=()=>{
|
||
for(let i=0;i<links.length;i++){
|
||
// 创建a元素
|
||
let item=document.createElement('a');
|
||
// 修改属性
|
||
item.setAttribute('class','item');
|
||
item.setAttribute('href','#');
|
||
item.setAttribute('data-index',i);
|
||
// 追加元素
|
||
swipe_select.appendChild(item);
|
||
}
|
||
// 默认第一张
|
||
select(0);
|
||
// 绑定各个事件并开始轮播
|
||
bind();
|
||
play();
|
||
};
|
||
// 绑定
|
||
let bind=()=>{
|
||
// 左翻事件监听
|
||
swipe_btn_left.addEventListener('click',()=>{
|
||
// 设置新的index
|
||
let index=current_index-1;
|
||
// 左翻越界，切到最后一张
|
||
if(index<0){
|
||
index=links.length-1;
|
||
}
|
||
// 加载新图片
|
||
select(index);
|
||
});
|
||
// 右翻事件监听
|
||
swipe_btn_right.addEventListener('click',()=>{
|
||
// 设置新的index
|
||
let index=current_index+1;
|
||
// 右翻越界，切到第一张
|
||
if(index>=links.length){
|
||
index=0;
|
||
}
|
||
// 加载新图片
|
||
select(index);
|
||
});
|
||
// 循环绑定指示器点击事件
|
||
for(const key in swipe_select.children){
|
||
if(swipe_select.children.hasOwnProperty(key)){
|
||
const element=swipe_select.children[key];
|
||
element.addEventListener('click',(e)=>{
|
||
// 取消默认点击跳转
|
||
e.preventDefault();
|
||
// 跳转到当前指示点中data-index所指定的图片
|
||
select(e.target.dataset.index);
|
||
});
|
||
}
|
||
}
|
||
// 绑定鼠标移入事件
|
||
swipe.addEventListener('mouseover',(e)=>{
|
||
// 防止鼠标从子元素移出时触发
|
||
if(e.relatedTarget&&swipe.compareDocumentPosition(e.relatedTarget)==10){
|
||
stop();
|
||
}
|
||
});
|
||
// 绑定鼠标移出事件
|
||
swipe.addEventListener('mouseout',(e)=>{
|
||
// 防止鼠标从子元素移出时触发
|
||
if(e.relatedTarget&&swipe.compareDocumentPosition(e.relatedTarget)==10){
|
||
play();
|
||
}
|
||
});
|
||
// 绑定鼠标移动事件
|
||
swipe.addEventListener('mousemove',(e)=>{
|
||
stop();
|
||
});
|
||
};
|
||
|
||
// 页面加载完毕，执行初始化
|
||
window.addEventListener('load',()=>{
|
||
init();
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |