效果图:
使用JavaScript自动定义函数完成轮播淡入的效果
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<title>轮播</title>
<style>
body {
margin: 0;
padding: 0;
width: 1349px;
}
#container {
width: 1349px;
height: 336px;
background-color: black;
}
#photos {
margin: 0;
position: absolute;
left: 200px;
width: 730px;
height: 336px;
}
.pictures {
position: absolute;
width: 730px;
height: 336px;
list-style: none;
}
#arrows {
position: absolute;
width: 800px;
height: 336px;
margin-top: 130px;
margin-left: -30px;
}
.arrow {
font-size: 2.5em;
background-color: rgb(144, 144, 144, 0.1);
color: white;
width: 30px;
cursor: pointer;
}
#buttons {
position: absolute;
margin-top: -10px;
margin-left: 560px;
z-index: 4;
}
.button {
width: 6px;
height: 6px;
border-radius: 3px;
background-color: grey;
float: left;
margin-right: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<div id='container'>
<ul id='photos'>
<li class='pictures' id='#000000' style='z-index: 2;'><img src='./img/title-1.jpg' alt="#"></li>
<li class='pictures' id='#102329'><img src='./img/title-2.jpg' alt="#"></li>
<li class='pictures' id='#010006'><img src='./img/title-3.jpg' alt="#"></li>
<li class='pictures' id='#111A29'><img src='./img/title-4.jpg' alt="#"></li>
<li class='pictures' id='#38373D'><img src='./img/title-5.jpg' alt="#"></li>
<li class='pictures' id='#F3EDED'><img src='./img/title-6.jpg' alt="#"></li>
<li class='pictures' id='#188987'><img src='./img/title-7.jpg' alt="#"></li>
<div id='arrows'>
<span class='arrow' title='left'><</span>
<span class='arrow' title='right' style='float: right;'>></span>
</div>
</ul>
</div>
<div id='buttons'>
<span class='button' style='background-color: red;'></span>
<span class='button'></span>
<span class='button'></span>
<span class='button'></span>
<span class='button'></span>
<span class='button'></span>
<span class='button'></span>
</div>
<script>
let count = 0; //定义图片变更次数
let FI = null; //存储淡入interval循环
let timer = null;//存储轮播interval循环
let fullBox = document.getElementById('container');//用于设置背景颜色
let pictures = document.getElementsByClassName('pictures');//存储图片
let arrow = document.getElementsByClassName('arrow');//存储 page左右箭头
let button = document.getElementsByClassName('button');//存储下部圆圈
let percent = 0;//淡入循环变量
function fadeIn() {//淡入函数
FI = setInterval(function () {
percent += 0.010000; //精确浮点数精度
if (percent >= 1) {
clearInterval(FI);
} else {
pictures[count].style.opacity = percent;
}
}, 10);
percent = 0;
}
function pic() { // 图像变换函数
for (let i = 0; i < pictures.length; i++) {
pictures[i].style.opacity = "0";
}
// 所有图片透明
fullBox.style.backgroundColor = pictures[count].id // 背景图片颜色等于相应图片的id
for (let c = 0; c < button.length; c++) { // 底部按钮颜色变化
button[c].style.backgroundColor = 'grey';
}
button[count].style.backgroundColor = 'red';
}
//主轮播循环
showtime();
function showtime() {
timer = setInterval(show, 4000)
}
function show() {//轮播循环函数
count++;
if (count > pictures.length - 1) {
count = 0;
}
fadeIn();
pic();
}
// page左右箭头
for (let i = 0; i < arrow.length; i++) {
arrow[i].onmouseover = function () {
clearInterval(timer);
};
arrow[i].onmouseout = function () {
showtime();
};
arrow[i].onclick = function () {
if (this.title === 'left') {
count--;
if (count < 0) {
count = pictures.length - 1;
}
} else {
count++;
if (count > pictures.length - 1) {
count = 0;
}
}
fadeIn();
pic();
}
}
//底部圆点
for (let i = 0; i < button.length; i++) {
button[i].index = i;
button[i].onmouseover = function () {
clearInterval(timer);
count = this.index;//确保count值不会出错
fadeIn();
pic();
};
button[i].onmouseout = function () {
showtime()
};
}
</script>
</body>
</html>
源码+图片资源下载:点我下载