业务需求：三张背景图，循环切换，切换效果为淡入淡出，即需要控制透明度；
方法一
结合使用js和css动画效果：利用定时器循环改变当前图片类名，使当前图片淡出，同时改变下一张图片类型，使下一张图片淡入，此种方法当前图片淡出和下一张图片淡入为同时进行，表现为一种交叉叠化的过渡效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
body {
width: 100%;
height: 100%;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.active {
opacity: 1;
}
.fadeout {
-webkit-transition: all 0.67s;
-moz-transition: all 0.67s;
-ms-transition: all 0.67s;
-o-transition: all 0.67s;
transition: all 0.67s;
opacity: 0;
}
.fadein {
-webkit-transition: all 0.67s;
-moz-transition: all 0.67s;
-ms-transition: all 0.67s;
-o-transition: all 0.67s;
transition: all 0.67s;
opacity: 1;
}
</style>
</head>
<body>
<img src="image/image/首页bg-1.png" alt="" class="item active">
<img src="image/image/首页bg-2.png" alt="" class="item">
<img src="image/image/首页bg-3.png" alt="" class="item">
<script type="text/javascript">
var item = document.querySelectorAll('.item');
var index = 0; //记录图片的下标
// 切换图片效果实现
timer1 = setInterval(nextImg, 2000)
function nextImg() {
item[index].className = "fadeout"; //当前图片淡出
index++
index = index % 3;
item[index].className = "fadein"; //下一张图片淡出
}
</script>
</body>
</html>
方法二
使用js控制透明度opacity来实现图片的渐隐渐现的效果: 此种方法为当前图片渐隐后下一张图片渐现，表现为一种类似眨眼的渐隐渐现的过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 100%;
height: 100%;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.active {
opacity: 1;
}
</style>
</head>
<body>
<img src="image/image/首页bg-1.png" alt="" class="item active">
<img src="image/image/首页bg-2.png" alt="" class="item">
<img src="image/image/首页bg-3.png" alt="" class="item">
<script>
var item = document.querySelectorAll('.item');
var opa = 1; //通过控制透明度opacity来实现图片的渐隐渐现的效果
var time1, time2;
var index = 0; //记录图片的下标
// 切换下一张图片效果实现
function nextImg() {
if (time1) {
clearInterval(time1);
}
//用计时器实现渐变消失效果
time1 = setInterval(function () {
opa -= 0.1;
// 满足条件，证明当前的图片已经看不见，下一张图片就开始出现
if (opa <= 0) {
clearInterval(time1);
opa = 0;//以防万一，再给它赋值为0；这样透明度就为0
index++;//下一张图片的索引就是index++;
index = index % item.length;
fadeIn();//上一张图片消失，这张图片就要显示，执行此函数
}
item[index].style.opacity = opa;//当前的图片的透明度随着opa的减少减少
}, 16.7)
}
// 控制图片的出现
function fadeIn() {
time2 = setInterval(function () {
opa += 0.1;
if (opa >= 1) {
clearInterval(time2);
opa = 1;
}
item[index].style.opacity = opa;//这里的index就是上张图片的index++;
}, 16.7)
}
// 控制图片的自动播放
var autoPlay = setInterval(nextImg, 3000); //默认计时器打开
</script>
</body>
</html>
鼠标悬停功能
在上面基础功能实现后，可以继续优化，例如鼠标悬浮图片停止切换，鼠标离开图片继续切换
在第二种实现方式的情况下，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
.wrap {
width: 100%;
height: 100%;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="wrap">
<img src="image/image/首页bg-1.png" alt="" class="item active">
<img src="image/image/首页bg-2.png" alt="" class="item">
<img src="image/image/首页bg-3.png" alt="" class="item">
</div>
<script>
var item = document.querySelectorAll('.item');
var wrap = document.querySelector('.wrap')
var opa = 1; //通过控制透明度opacity来实现图片的渐隐渐现的效果
var time1, time2;
var index = 0; //记录图片的下标
// 切换下一张图片效果实现
function nextImg() {
if (time1) {
clearInterval(time1);
}
//用计时器实现渐变消失效果
time1 = setInterval(function () {
opa -= 0.1;
// 满足条件，证明当前的图片已经看不见，下一张图片就开始出现
if (opa <= 0) {
clearInterval(time1);
opa = 0;//以防万一，再给它赋值为0；这样透明度就为0
index++;//下一张图片的索引就是index++;
index = index % item.length;
fadeIn();//上一张图片消失，这张图片就要显示，执行此函数
}
item[index].style.opacity = opa;//当前的图片的透明度随着opa的减少减少
}, 16.7)
}
// 控制图片的出现
function fadeIn() {
time2 = setInterval(function () {
opa += 0.1;
if (opa >= 1) {
clearInterval(time2);
opa = 1;
}
item[index].style.opacity = opa;//这里的index就是上张图片的index++;
}, 16.7)
}
// 控制图片的自动播放
var autoPlay = setInterval(nextImg, 3000); //默认计时器打开
//鼠标进入清除计时器，停止播放
wrap.onmouseenter = function () {
clearInterval(autoPlay);
}
//鼠标离开继续执行计时器
wrap.onmouseleave = function () {
autoPlay = setInterval(nextImg, 3000);
}
</script>
</body>
</html>
轮播按钮、上一个、下一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 590px;
height: 470px;
position: relative;
}
img {
width: 590px;
height: 470px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.active {
opacity: 1;
}
.pre,
.next {
width: 22px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
.pre {
left: 20px;
background: url(image/left.png) no-repeat center center;
}
.next {
right: 20px;
background: url(image/right.png) no-repeat center center;
}
ul,
li {
list-style: none;
}
.circle {
width: 80px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -40px;
}
.btn {
float: left;
margin: 0 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: skyblue;
}
.btn-active {
background-color: orange;
}
</style>
</head>
<body>
<div class="wrap">
<div class="banner">
<img src="image/image/首页bg-1.png" alt="" class="item active">
<img src="image/image/首页bg-2.png" alt="" class="item">
<img src="image/image/首页bg-3.png" alt="" class="item">
</div>
<div class="pre"></div>
<div class="next"></div>
<div class="circle">
<ul>
<li class="btn btn-active"></li>
<li class="btn"></li>
<li class="btn"></li>
</ul>
</div>
</div>
<script>
var item = document.querySelectorAll('.item');
var wrap = document.querySelector('.wrap');
var btn = document.querySelectorAll('.btn'); // btn按钮组
var pre = document.querySelector('.pre'); // 上一个按钮
var next = document.querySelector('.next'); // 下一个按钮
var opa = 1; //通过控制透明度opacity来实现图片的渐隐渐现的效果
var time1, time2;
var index = 0; //记录图片的下标
// 切换下一张图片效果实现
function nextImg() {
if (time1) {
clearInterval(time1);
}
//用计时器实现渐变消失效果
time1 = setInterval(function () {
opa -= 0.1;
// 满足条件，证明当前的图片已经看不见，下一张图片就开始出现
if (opa <= 0) {
clearInterval(time1);
opa = 0;//以防万一，再给它赋值为0；这样透明度就为0
index++;//下一张图片的索引就是index++;
index = index % item.length;
fadeIn();//上一张图片消失，这张图片就要显示，执行此函数
}
item[index].style.opacity = opa;//当前的图片的透明度随着opa的减少减少
// btn按钮组样式重置
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = 'skyblue';
}
// 当前图片的点样式高亮
btn[index].style.backgroundColor = 'orange';
}, 16.7)
}
// 控制图片的出现
function fadeIn() {
time2 = setInterval(function () {
opa += 0.1;
if (opa >= 1) {
clearInterval(time2);
opa = 1;
}
item[index].style.opacity = opa;//这里的index就是上张图片的index++;
}, 16.7)
}
// 控制图片的自动播放
var autoPlay = setInterval(nextImg, 3000); //默认计时器打开
//鼠标进入清除计时器，停止播放
wrap.onmouseenter = function () {
clearInterval(autoPlay);
}
//鼠标离开继续执行计时器
wrap.onmouseleave = function () {
autoPlay = setInterval(nextImg, 3000);
}
// 切换下一张图片效果实现
next.onclick = function () {
nextImg();
}
// 切换上一张图片效果实现
pre.onclick = function () {
if (time1) {
clearInterval(time1);
}
time1 = setInterval(function () {
// 控制当前图片消失
opa -= 0.1;
if (opa <= 0) {
clearInterval(time1);
opa = 0;
index--; //上张图片的index
if (index < 0) { //如果索引值小与0，那就从图片的最后一个重新开始
index = item.length - 1;
}
fadeIn(); //此时显示的就是上张图片
}
item[index].style.opacity = opa;
// btn按钮组样式重置
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = 'skyblue';
}
btn[index].style.backgroundColor = 'orange';
}, 16.7)
}
// 通过点击点来控制图片的切换
for (var i = 0; i < btn.length; i++) {
btn[i].index = i;
btn[i].onclick = function () {
// 切换下一张图片
// 提前存储this
var that = this;
console.log(this.index, index);
if (time1) {
clearInterval(time1)
}
time1 = setInterval(function () {
opa -= 0.1;
if (opa <= 0) {
clearInterval(time1);
opa = 0;
index = that.index;
fadeIn();
}
item[index].style.opacity = opa;
// 对记录图片的点的样式进行重置
for (var j = 0; j < btn.length; j++) {
btn[j].style.backgroundColor = 'skyblue';
}
btn[index].style.backgroundColor = 'orange';
}, 16.7)
}
}
</script>
</body>
</html>
