代码如下
<!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>
* {
padding: 0;
margin: 0;
}
.container{
height:345px;
width: 690px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.box{
width: 2070px;
}
img{
height: 345px;
width: 690px;
float: left;
cursor: pointer;
}
button{
height: 100px;
width: 55px;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
color: #fff;
border: none;
cursor: pointer;
font-size: 35px;
}
.container button:nth-of-type(1){
top: 110px;
left: 0px;
}
.container button:nth-of-type(2){
top: 110px;
right: 0px;
}
button:hover{
background-color: rgba(0, 0, 0, .4);
}
footer{
height: 20px;
width: 100px;
position: absolute;
bottom: 0;
left: 300px;
}
span{
display: inline-block;
height:10px;
width: 10px;
border:3px #fff;
border-radius: 50%;
background-color: #fff;
margin: 0 10px 0;
cursor: pointer;
}
.active{
background-color: rgba(255, 255, 255, .4);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="3.jpg" title="第一页">
<img src="4.jpg" title="第二页">
<img src="5.jpg" title="第三页">
</div>
<button><</button>
<button>></button>
<footer>
<span class="active"></span>
<span></span>
<span></span>
</footer>
</div>
<script>
var box = document.querySelector('.box');
var span = document.getElementsByTagName('span');
var leftBtn = document.getElementsByTagName('button')[0];
var rightBtn = document.getElementsByTagName('button')[1];
var wid = 690;
var obj = {
timer : 0,
n : 0
}
var count = 0;
// 让轮播图自动转，把setInterval放在函数里面是为了方便下面onmouseout再次让轮播图转起来
function auto() {
obj.timer = setInterval(function () {
box.style.transform = 'translateX(-' + obj.n * wid +'px)';
dots();
obj.n ++;
count = 1;
if (obj.n == 3) {
obj.n = 0;
}
},2000);
}
auto();
// 鼠标移入自动转结束
box.onmouseover = function () {
clearInterval(obj.timer);
}
box.onmouseout = auto;//继续转
// 没想到当把button定位安在box上之后，box的onmouseover和onmouseout都没用了，感觉是因为创建了新的bfc的原因，所以下面就给两个button也加了这两个事件
leftBtn.onmouseover = function () {
clearInterval(obj.timer);
}
leftBtn.onmouseout = auto;//继续转
rightBtn.onmouseover = function () {
clearInterval(obj.timer);
}
rightBtn.onmouseout = auto;//继续转
// 让小圆点和图片一一对应
function dots() {
for(let i = 0; i < 3; i ++ ){
span[i].className = '';
}
span[obj.n].className = 'active';
}
// 给小圆点增加点击事件
for(let i = 0; i < span.length; i ++){
span[i].index = i;//加属性是为了避免闭包
console.log(span[i].index);
span[i].onclick = function () {
obj.n = this.index;
box.style.transform = 'translate(-' + wid * obj.n + 'px)';
dots();
};
}
// 给左边按钮增加事件
leftBtn.onclick = function () {
if (count == 1) {
count = 0;
obj.n --;
if (obj.n < 0){
obj.n = 2;
}
}
obj.n --;
if (obj.n < 0){
obj.n = 2;
}
box.style.transform = 'translate(-' + wid * obj.n +'px)';
dots();
}
// 给右边按钮增加事件
rightBtn.onclick = function () {
if (count == 1) {
count = 0; //判断是不是刚从自动循环结束，如果是直接结束，那就直接
}else{
obj.n ++;
}
if (obj.n == 3) {
obj.n = 0;
}
box.style.transform = 'translate(-' + wid * obj.n +'px)';
dots();
}
</script>
</body>
</html>
需求：
- 自动轮播，鼠标悬停之后停止轮播，移开之后继续轮播
- 点击左右button切换图片
- 点击小圆点切换图片
小结：
在左右切换的时候，要判断一下是否刚从自动轮播结束，如果刚从自动轮播结束，要注意一下obj.n已经经过加法运算了，所以要重新算一下
还存在一个bug，就是结束自动轮播和继续自动轮播是有些赘余的，如果把button和放图片的盒子再放在一个大盒子里面就可以解决这个问题，但是我已经不想改了
在第十一周的时候就已经跟着视频做过一次轮播图了，然后这次是完全自己敲的，感觉还是有点小收获的