封装函数
// 封装匀速动画函数
// ele 谁
// time 间歇定时器的时间
// step 步长
// target 目标
function moveX(ele, time, step, target) {
clearInterval(ele.timeId)
ele.timeId = setInterval(function () {
var speed = ele.offsetLeft < target ? step : -step;
ele.style.left = Math.abs(target - ele.offsetLeft) >= step ? ele.offsetLeft + speed + 'px' : target + 'px';
}, time);
}
function moveY(ele, time, step, target) {
clearInterval(ele.timeId);
ele.timeId = setInterval(function () {
var speed = ele.offsetTop < target ? step : -step;
ele.style.top = Math(target - ele.offsetTop) >= step ? ele.offsetTop + speed + 'px' : target + 'px';
}, time);
}
// 缓动动画封装
function slowMove(ele, target, time) {
clearInterval(ele.timeId);
ele.timeId = setInterval(function () {
if (ele.offsetLeft < target) {
ele.style.left = ele.offsetLeft + Math.ceil((target - ele.offsetLeft) / 10) + 'px';
} else {
ele.style.left = ele.offsetLeft + Math.floor((target - ele.offsetLeft) / 10) + 'px';
}
}, time)
}
1.缓动动画
<!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>
.father {
width: 1000px;
height: 600px;
margin: 30px auto;
position: relative;
border: 1px solid red;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<input type="button" value="向右">
<input type="button" value="向左">
<div class="father">
<div class="son"></div>
</div>
<script>
// 获取按钮节点
var btn1 = document.getElementsByTagName('input')[0];
var btn2 = document.getElementsByTagName('input')[1];
// 获取father节点
var father = document.getElementsByClassName('father')[0];
// 获取son节点
var son = document.getElementsByClassName('son')[0];
var time;
btn1.onclick = function () {
clearInterval(time);
time = setInterval(function () {
son.style.left = son.offsetLeft + Math.ceil((900 - son.offsetLeft) / 10) + 'px';
}, 30)
}
btn2.onclick = function () {
clearInterval(time);
time = setInterval(function () {
son.style.left = son.offsetLeft + Math.floor((0 - son.offsetLeft) / 10) + 'px';
}, 30)
}
</script>
</body>
</html>
2.焦点轮播
<!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;
list-style: none;
}
.box {
width: 800px;
height: 400px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.box ul {
width: 4000px;
height: 400px;
position: absolute;
}
.box ul li {
float: left;
}
.quan {
position: absolute;
left: 50%;
bottom: 30px;
margin-left: -75px;
}
.quan div {
width: 10px;
height: 10px;
border-radius: 50%;
float: left;
background-color: white;
margin: 0 10px;
}
.active {
background-color: red !important;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="./images/img1.png" alt="">
</li>
<li>
<img src="./images/img2.png" alt="">
</li>
<li>
<img src="./images/img3.png" alt="">
</li>
<li>
<img src="./images/img4.png" alt="">
</li>
<li>
<img src="./images/img5.png" alt="">
</li>
</ul>
<div class="quan">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script src="./index.js"></script>
<script>
var oul = document.getElementsByTagName('ul')[0];
var dot = document.getElementsByClassName('quan')[0].children;
// 封装排他函数
function Fun(ele) {
for (var i = 0; i < ele.length; i++) {
ele[i].className = '';
}
}
// 循环绑定
for (var i = 0; i < dot.length; i++) {
dot[i].index = i;
dot[i].onclick = function () {
var cont = this.index;
slowMove(oul, cont * -800, 10);
Fun(dot);
this.className = 'active';
}
}
</script>
</body>
</html>
3.焦点轮播箭头版
<!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;
list-style: none;
}
.box {
width: 800px;
height: 400px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.box ul {
width: 4000px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
}
.box ul li {
width: 800px;
height: 400px;
float: left;
}
.quan {
position: absolute;
left: 50%;
bottom: 30px;
margin-left: -75px;
}
.quan div {
width: 10px;
height: 10px;
border-radius: 50%;
float: left;
background-color: white;
margin: 0 10px;
}
.left,
.right {
width: 50px;
height: 100px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
text-align: center;
line-height: 100px;
top: 50%;
margin-top: -50px;
}
.left {
left: 0px;
}
.right {
right: 0px;
}
.active {
background-color: red !important;
}
</style>
<script src="index.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="./images/img1.png" alt="">
</li>
<li>
<img src="./images/img2.png" alt="">
</li>
<li>
<img src="./images/img3.png" alt="">
</li>
<li>
<img src="./images/img4.png" alt="">
</li>
<li>
<img src="./images/img5.png" alt="">
</li>
</ul>
<div class="quan">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="left"><</div>
<div class="right">></div>
</div>
<script>
var oul = document.getElementsByTagName('ul')[0];
var dot = document.getElementsByClassName('quan')[0].children;
var _left = document.getElementsByClassName('left')[0];
var _right = document.getElementsByClassName('right')[0];
// 封装排他函数
function Fun(ele) {
for (var i = 0; i < ele.length; i++) {
ele[i].className = '';
}
}
// 准备一个计数器,默认从零开始
var cont = 0;
// 小圆点的事件
for (var i = 0; i < dot.length; i++) {
dot[i].index = i;
dot[i].onclick = function () {
// 让计数器变为此时的 i
cont = this.index;
// 调用缓动函数
slowMove(oul, cont * -800, 10);
Fun(dot);
this.className = 'active';
}
}
// 左边点击事件
_left.onclick = function () {
// 如果已经到了第一张,再点击跳到最后一张
if (cont <= 0) {
cont = 4;
} else {
cont--;
}
Fun(dot);
dot[cont].className = 'active';
slowMove(oul, cont * -800, 10);
}
// 右边添加点击事件
_right.onclick = function () {
if (cont >= 4) {
cont = 0;
} else {
cont++;
}
Fun(dot);
dot[cont].className = 'active';
slowMove(oul, cont * -800, 10);
}
</script>
</body>
</html>
4.自动轮播
<!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;
list-style: none;
}
.box {
width: 800px;
height: 400px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.box ul {
width: 4000px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
}
.box ul li {
width: 800px;
height: 400px;
float: left;
}
.quan {
position: absolute;
left: 50%;
bottom: 30px;
margin-left: -75px;
}
.quan div {
width: 10px;
height: 10px;
border-radius: 50%;
float: left;
background-color: white;
margin: 0 10px;
}
.left,
.right {
width: 50px;
height: 100px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
text-align: center;
line-height: 100px;
top: 50%;
margin-top: -50px;
}
.left {
left: 0px;
display: none;
}
.right {
right: 0px;
display: none;
}
.active {
background-color: red !important;
}
</style>
<script src="../代码练习II/index.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="../代码练习II/images/img1.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img2.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img3.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img4.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img5.png" alt="">
</li>
</ul>
<div class="quan">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="left"><</div>
<div class="right">></div>
</div>
<script>
var oul = document.getElementsByTagName('ul')[0];
var dot = document.getElementsByClassName('quan')[0].children;
var _left = document.getElementsByClassName('left')[0];
var _right = document.getElementsByClassName('right')[0];
var box = document.getElementsByClassName('box')[0];
function Fun(ele) {
for (var i = 0; i < ele.length; i++) {
ele[i].className = '';
}
}
// 自动轮播定时器
var autoTime;
// 计数器
var cont = 0;
// 把轮播的动作封装为函数
function autoPlay() {
autoTime = setInterval(function () {
// if (cont >= 4) {
// cont = 0;
// } else {
// cont++;
// }
// slowMove(oul, cont * -800, 30);
// Fun(dot);
// dot[cont].className = 'active';
_right.onclick();
}, 2000)
}
autoPlay();
box.onmouseover = function () {
clearInterval(autoTime);
_left.style.display = 'block';
_right.style.display = 'block';
}
box.onmouseout = function () {
autoPlay();
_left.style.display = 'none';
_right.style.display = 'none';
}
// 小圆点的事件
for (var i = 0; i < dot.length; i++) {
dot[i].index = i;
dot[i].onclick = function () {
// 让计数器变为此时的 i
cont = this.index;
// 调用缓动函数
slowMove(oul, cont * -800, 10);
Fun(dot);
this.className = 'active';
}
}
// 左边点击事件
_left.onclick = function () {
// 如果已经到了第一张,再点击跳到最后一张
if (cont <= 0) {
cont = 4;
} else {
cont--;
}
Fun(dot);
dot[cont].className = 'active';
slowMove(oul, cont * -800, 10);
}
// 右边添加点击事件
_right.onclick = function () {
if (cont >= 4) {
cont = 0;
} else {
cont++;
}
Fun(dot);
dot[cont].className = 'active';
slowMove(oul, cont * -800, 10);
}
</script>
</body>
</html>
5.无缝轮播
<!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;
list-style: none;
}
.box {
width: 800px;
height: 400px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
.box ul {
width: 4800px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
}
.box ul li {
width: 800px;
height: 400px;
float: left;
}
.quan {
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -75px;
}
.quan div {
width: 10px;
height: 10px;
background-color: white;
float: left;
margin: 0 10px;
border-radius: 50%;
}
.left,
.right {
width: 50px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 50%;
margin-top: -50px;
font-size: 30px;
display: none;
}
.left {
left: 0px;
}
.right {
right: 0px;
}
.active {
background-color: red !important;
}
</style>
<script src="index.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="../代码练习II/images/img1.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img2.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img3.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img4.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img5.png" alt="">
</li>
<li>
<img src="../代码练习II/images/img1.png" alt="">
</li>
</ul>
<div class="quan">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="left"><</div>
<div class="right">></div>
</div>
<script>
// 获取节点
// 获取大家盒子节点
var box = document.getElementsByClassName('box')[0];
// 获取ul节点
var oul = document.getElementsByTagName('ul')[0];
// 获取小圆点节点
var bot = document.getElementsByClassName('quan')[0].children;
// 获取左右按钮节点
var _left = document.getElementsByClassName('left')[0];
var _right = document.getElementsByClassName('right')[0];
// 封装排他函数
function Fun(ele) {
for (var i = 0; i < ele.length; i++) {
ele[i].className = '';
}
}
// 图片计数器
var tCont = 0;
// 小圆点计数器
var oCont = 0;
// 计时器
var timeId;
// 给左右按钮添加点击事件
_left.onclick = function () {
if (tCont <= 0 || tCont > 4) {
oul.style.left = -4000 + 'px';
tCont = 4;
oCont = 4
} else {
tCont--;
oCont--;
}
// if (tCont <= 0) {
// oCont = 4;
// } else {
// oCont--;
// }
slowMove(oul, tCont * -800, 30);
Fun(bot);
bot[oCont].className = 'active';
}
_right.onclick = function () {
if (tCont > 4) {
oul.style.left = 0 + 'px';
tCont = 1;
} else {
tCont++;
}
if (tCont > 4) {
oCont = 0;
} else {
oCont++;
}
slowMove(oul, tCont * -800, 30);
Fun(bot);
bot[oCont].className = 'active';
}
// 自动轮播
function autoTime() {
timeId = setInterval(function () {
_right.onclick()
}, 2000)
}
autoTime();
// 给box添加移入和移出事件
box.onmouseover = function () {
_left.style.display = 'block';
_right.style.display = 'block';
clearInterval(timeId);
}
box.onmouseout = function () {
_left.style.display = 'none';
_right.style.display = 'none';
autoTime();
}
// 焦点轮播
for (var i = 0; i < bot.length; i++) {
bot[i].index = i;
console.log(bot[i].index);
bot[i].onclick = function () {
oul.style.left = oCont * -800 + 'px';
tCont = this.index;
oCont = this.index;
slowMove(oul, tCont * -800, 30);
Fun(bot);
this.className = 'active';
}
}
</script>
</body>
</html>