轮播图时网站中经常需要的东西,那我们就立刻看看轮播图的做法,直接贴代码.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="utils.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
background: #ffffff;
}
#wrap {
width: 300px;
height: 150px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#list {
width: 1200px;
overflow: hidden;
position: absolute;
left: 0px;
top: 0;
transition: all 0.5s linear;
}
#list img {
float: left;
width: 300px;
height: 150px;
}
#tab {
position: relative;
display: none;
}
#tab a {
position: absolute;
top: 50%;
color: #ffffff;
line-height: 50px;
padding: 0 10px;
background: rgba(0, 0, 0, 0.6);
margin-top: 55px;
cursor: pointer;
}
#left-btn {
left: 0;
}
#right-btn {
right: 0;
}
#btn {
width: 300px;
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}
.btn a {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.red {
background: red;
}
.white {
background: white;
}
</style>
<script>
window.onload = function () {
//这里封装了一个$函数,用来获取id,$相当于document.getElementById()
let tab = $("tab");
let leftBtn = $("left-btn");
let rightBtn = $("right-btn");
let list = $("list");
let btn = $("btn");
let tabs = tab.getElementsByTagName("a");
let btns = btn.getElementsByTagName("a");
let index = 0;//记录当前是第几张图片
let time = null;//记录定时器
//鼠标进入list时,tab显示
list.onmouseenter = function () {
tab.style.display = "block";
clear();//清除定时器
};
//鼠标离开list时,tab隐藏
list.onmouseleave = function () {
tab.style.display = "none";
start();//启动定时器
};
//遍历tabs,给每个tab加上进入离开事件,否则tab会跳动
for (let i = 0; i < tabs.length; i++) {
tabs[i].onmouseenter = function () {
tab.style.display = "block";
clear();//清除定时器
};
tabs[i].onmouseleave = function () {
tab.style.display = "none";
start();//启动定时器
};
}
//点击右按钮往右走
rightBtn.onclick = function () {
rightMove();
};
//点击左按钮往左走
leftBtn.onclick = function () {
leftMove();
};
//启动定时器,自动播放
start();
//点击小圆点,切换图片
for (let i = 0; i < btns.length; i++) {
btns[i].onmouseenter = function () {
clear();//鼠标移入小圆点时清除定时器
index = i;
list.style.left = -index * 300 + "px";
redBtns(index);
};
btns[i].onmouseleave = function () {
start();//鼠标离开小圆点时开启定时器
}
}
/**
* 启动定时器
* **/
function start() {
time = setInterval(function () {
rightMove();
}, 1000);
}
/**
* 清除定时器
* */
function clear() {
clearInterval(time);
}
/**
* 向左移动
**/
function leftMove() {
//当index为-1时,设为3回到最后一张图,否则会空白
index--;
if (index === -1) {
index = 3
}
list.style.left = -index * 300 + "px";
redBtns(index);//小圆点的滚动
}
/**
* 向右移动
*/
function rightMove() {
index++;
//当index为4是,设为0回到第一张图,否则会显示空白
if (index === 4) {
index = 0;
}
list.style.left = -index * 300 + "px";
redBtns(index);//小圆点的滚动
}
/**
* 小红点的滚动
* @param index
*/
function redBtns(index) {
//遍历循环所有的小圆点,看当前的index和i的值是否相等
for (let i = 0; i < btns.length; i++) {
if (i === index) {
btns[i].className = "red";
} else {
btns[i].className = "white";
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="list">
<img src="img/img1.jpg" alt="">
<img src="img/img2.jpg" alt="">
<img src="img/img3.jpg" alt="">
<img src="img/img4.jpg" alt="">
</div>
<div id="tab">
<a id="left-btn" href="javascript:"><</a>
<a id="right-btn" href="javascript:">></a>
</div>
<div id="btn" class="btn">
<a class="red" href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
</div>
</div>
</body>
</html>