使用css渐变动画，完成图片的切换的效果。
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播事件</title>
<style>
html,
body {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0
}
#container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.slide-wrap {
width: 1366px;
height: 768px;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.slide-items {
flex: 1;
width: 100%;
height: 100%;
}
.slide-items>ul {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.slide-items>ul>li {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
opacity: 0;
transition: all 800ms ease-in
}
.slide-action {
position: absolute;
/*display: inline-block;*/
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
z-index: 3;
}
.slide-action>a {
text-decoration: none;
color: #fff;
font-size: 16px;
width: 100%;
height: 100%;
border-radius: 100%;
display: inline-block;
background-color: rgba(232, 232, 232, 0.54);
transition: background-color 200ms ease-out;
}
.slide-action>a:hover {
background-color: rgba(162, 162, 162, 0.54);
}
.action-prev {
left: 0;
margin-left: 50px
}
.action-next {
right: 0;
margin-right: 50px
}
.slide-indicator {
position: absolute;
width: 100%;
height: 24px;
z-index: 99;
bottom: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.slide-indicator>ul {
height: 24px;
float: left;
list-style: none;
padding: 0;
margin: 0;
}
.slide-indicator>ul>li,
.slide-indicator>ul>li>a {
height: 24px;
width: 24px;
display: inline-block;
}
.slide-indicator>ul>li>a {
cursor: pointer;
background-color: rgba(56, 56, 56, 0.55);
border-radius: 10px;
width: 10px;
height: 10px;
transition: background-color 600ms ease;
}
.selected {
background-color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div class="slide-wrap">
<div class="slide-items">
<ul>
<li>
<a href="http://www.baidu.com"> </a>
</li>
<li>
<a href="http://www.google.com"> </a>
</li>
<li>
<a href="http://www.bing.com"> </a>
</li>
<li>
<a href="http://www.zhihu.com"> </a>
</li>
</ul>
</div>
<span class="slide-action action-prev"><a href="#" id="prev"><</a></span>
<span class="slide-action action-next"><a href="#" id="next">></a></span>
<div class="slide-indicator">
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
</div>
</div>
<script>
function addLoadEvent(func) {
var oldonload = window.onload
if (typeof window.onload !== 'function') {
window.onload = func
} else {
window.onload = function () {
oldonload()
func()
}
}
}
let slide = () => {
let slide = document.querySelector(".slide-wrap")
let slideAction = document.querySelectorAll(".slide-action")
let items = document.querySelectorAll(".slide-items ul li")
let indicators = document.querySelectorAll(".slide-indicator ul li a")
let next = document.getElementById('next')
let prev = document.getElementById('prev')
let index = 1
let timer = null
// 默认属性设置
items[0].style.zIndex = 1
items[0].style.opacity = 1
indicators[0].style.backgroundColor = "#fff"
next.addEventListener('click', (e) => {
animate()
index++
if (index + 1 > items.length) {
index = 0
}
e.preventDefault()
})
prev.addEventListener('click', (e) => {
if (index-- <= 0) {
index = parseInt(items.length, 10) - 1
}
animate(index)
e.preventDefault()
})
// 自动播放
timer = setInterval(() => { next.click() }, 4000)
//控制显示
let animate = (t) => {
if (typeof t !== 'undefined') { index = t }
for (let i = 0, l = items.length; i < l; i++) {
if (items[i].style.zIndex == 1) {
items[i].style.zIndex = 0
items[i].style.opacity = 0
indicators[i].style.backgroundColor = "rgba(56, 56, 56, 0.55)"
break
}
}
console.log('【animate index:】', index)
items[index].style.opacity = 1
items[index].style.zIndex = 1
indicators[index].style.backgroundColor = "#fff"
}
// 指示器显示绑定事件
indicators.forEach((el, i) => {
el.addEventListener('click', (e) => {
animate(i)
index = i + 1
if (index + 1 > items.length) {
index = 0
}
e.preventDefault()
})
}, this)
// 鼠标悬停事件
slide.addEventListener('mouseover', (e) => {
clearInterval(timer)
slideAction.forEach((el) => {
el.style.display = 'inline-block'
}, this);
})
slide.addEventListener('mouseleave', (e) => {
timer = setInterval(() => { next.click() }, 4000)
slideAction.forEach((el) => {
el.style.display = 'none'
}, this);
})
}
addLoadEvent(slide)
</script>
</body>
</html>
网友评论