实例：仿制网易云音乐网站的轮播图
技术栈：HTML+CSS+JS
效果：
源码：
【html】【js】
<!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=()=>{
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>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background: #333;
}
/* 轮播图主体 */
.swipe{
/* 相对定位 */
position: relative;
width: 100%;
/* 溢出隐藏 */
overflow: hidden;
}
/* 模糊背景 */
.swipe .bg{
/* 绝对定位 */
position: absolute;
width: 500%;
height: 100%;
z-index: 1;
/* background: url("../images/op1/1.jpg") no-repeat; */
background-size: 6000px;
background-position: center center;
/* 模糊滤镜 */
filter: blur(140px);
}
/* 图片区域 */
.swipe section{
position: relative;
width: 100%;
max-width: 1500px;
height: 600px;
/* 居中 */
margin: 0 auto;
z-index: 2;
}
/* 图片盒子 */
.swipe .img-box{
width: 100%;
height: 100%;
}
/* 图片 */
.swipe .img-box .img{
width: 100%;
height: 100%;
/* 保持原有尺寸比例，裁切长边 */
object-fit: cover;
}
/* 指示器 */
.swipe .select{
position: absolute;
width: 100%;
height: 30px;
bottom: 20px;
border-radius: 15px;
text-align: center;
line-height: 30px;
}
.swipe .select .item{
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 10px;
/* 阴影 */
box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
}
/* 鼠标移入指示器 */
.swipe .select .item:hover{
background-color: #ff4400;
}
/* 指示器选中状态 */
.swipe .select .item.checked{
background-color: #ff4400;
}
/* 两侧按钮 */
.swipe .btn{
width: 40px;
height: 100px;
/* 绝对定位 垂直居中 */
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.05);
color: #fff;
/* 弹性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
/* 移入光标变小手 */
cursor: pointer;
z-index: 3;
/* 动画过渡 */
transition: 0.3s;
}
.swipe .btn.left{
left: -60px;
}
.swipe .btn.right{
right: -60px;
}
.swipe .btn i{
font-size: 50px;
}
.swipe .btn:hover{
background-color: rgba(0,0,0,0.2);
}
/* 响应式 屏幕尺寸小于1620px时以下代码生效（让两个按钮移动到图片主体内部） */
@media screen and (max-width:1620px) {
.swipe .btn.left{
left: 20px;
}
.swipe .btn.right{
right: 20px;
}
}
