轮播图案例——JavaScript

我们在逛某宝或者某东的时候会发现有图片会自动播放，而且鼠标经过的时候停止自动播放，点击左右按钮切换下一张图片，而且鼠标离开的时候经过一段时间重启自动播放。接下来我们就制作一下这个按案例。

1、HTML

下图是最终的页面效果：

一个大盒子里面包含图片、左右按钮、下方小圆点。
代码如图所示：

<div class="LunBo">
        <ul class="LunBo_img">
            <li><a href=""><img src="./img/1.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/2.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/3.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/4.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/5.jpg" alt=""></a></li>
        </ul>
        <ul class="anNiu_container">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="controller">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
        </div>
    </div>

没有经过CSS渲染后的页面内容会非常难看大家可以试一下！

2、CSS

首先设置：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

2.1 设置边框盒子

.LunBo {
    position: relative;
    width: 960px;
    height: 540px;
    margin: 50px auto;
    /*盒模式*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #E0E0E0;
    overflow: hidden;
    position: relative;
}

让整个盒子放到自己想要的位置。

2.2 设置轮播图片

.LunBo_img {
    width: 5760px;
    height: 540px;
    position: absolute;
    top: 0;
    left: 0;
}

.LunBo_img li {
    width: 960px;
    height: 540px;
    float: left;
}

.LunBo_img li a {
    display: block;
    width: 100%;
    height: 100%;
}

.LunBo_img li a img {
    display: block;
    width: 100%;
    height: 100%;
}

2.3 小圈圈设置

.anNiu_container {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    height: 25px;
    padding: 0 10px;
    border-radius: 20px;
    background: #CCC;
    opacity: .8;
}

.anNiu_container li {
    float: left;
    margin: 3.75px 7px;
    width: 17.5px;
    height: 17.5px;
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}
.anNiu_container>li.active {
    border: 1px solid orangered;
    background: orangered;
}

2.4 设置左右按钮

我们在CSS中设置，当鼠标经过LunBo盒子时左右按钮出现，鼠标离开LunBo盒子时左右按钮消失。

.controller {
    display: none;
}

.LunBo:hover .controller {
    display: block;
}

.left,
.right {
    /* display: none; */
    position: absolute;
    top: 50%;
    width: 45px;
    height: 60px;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 26px;
    transform: translateY(-50%);
    border-radius: 0 30px 30px 0;
    z-index: 2;
    cursor: pointer;
}

.right {
    right: 0;
    border-radius: 30px 0 0 30px;
}

将上面所有代码整合到一起就是就可以做出我们想要的内容。

3、JavaScript

1、获取所有元素
2、设置全局变量
3、封装动画函数
4、设置左右按钮和小圆圈动画。

// 获取所有元素ID
const LunBo = document.querySelector('.LunBo');
const LunBo_img = document.querySelector('.LunBo_img');
const anNiu_container = document.querySelector('.anNiu_container');
const controller = document.querySelector('.controller');
const left = document.querySelector('.left');
const right = document.querySelector('.right');

// 设置全局变量
let picIndex = 0;
let picWidth = LunBo.offsetWidth;

// 封装动画函数
function animate(obj, target) {
	// 先清理定时器
	clearInterval(obj.timeId);
	// 一会要清理定时器(只产生一个定时器)
	obj.timeId = setInterval(function () {
		// 获取对象当前的位置
		let current = obj.offsetLeft;
		// 每次移动多少像素
		let step = 10;
		// 判断是往正方向走还是往相反方向走
		step = current < target ? step : -step;
		// 每次移动后的距离
		current += step;
		// 判断当前移动后的位置是否到达目标位置
		if (Math.abs(target - current) > Math.abs(step)) {
			obj.style.left = current + "px";
		} else {
			// 清理定时器
			clearInterval(obj.timeId);
			obj.style.left = target + "px";
		}
	}, 0.48);
}

// 拷贝第一张图片到最后
LunBo_img.appendChild(LunBo_img.children[0].cloneNode(true));

// 循环遍历控制器li标签并注册单击事件和自定义属性值
for (let i = 0; i < anNiu_container.children.length; i++) {
	// 创建自定义属性值 index
	anNiu_container.children[i].setAttribute("index", i);

	// 注册鼠标放上去事件
	anNiu_container.children[i].onmouseover = function () {
		// 先清除所有li标签的class
		for (const j = 0; j < anNiu_container.children.length; j++) {
			anNiu_container.children[j].removeAttribute("class");
		}
		// 设置当前li效果
		this.className = "active";
		// 获取鼠标进入的li的当前索引值
		picIndex = this.getAttribute("index");
		// 移动ul
		animate(LunBo_img, -picIndex * picWidth);
	};
}

// 设置第一个图片的li为选中状态
anNiu_container.children[0].className = "active";

function Event() {
	// 判断当前图片是否为最后一张
	if (picIndex == LunBo_img.children.length - 1) {
		picIndex = 0;
		LunBo_img.style.left = 0 + "px";
	}
	// 将索引切换到下一张图片
	picIndex++;
	animate(LunBo_img, -picIndex * picWidth);
	// 添加控制器按钮样式
	if (picIndex == LunBo_img.children.length - 1) {
		anNiu_container.children[anNiu_container.children.length - 1].removeAttribute("class");
		anNiu_container.children[0].className = "active";
	} else {
		// 清除所有的小按钮的背景颜色
		for (let i = 0; i < anNiu_container.children.length; i++) {
			anNiu_container.children[i].removeAttribute("class");
		}
		anNiu_container.children[picIndex].className = "active";
	}
}

// 右边按钮单机事件
right.onclick = Event;

// 左边按钮单击事件
left.onclick = function () {
	// 判断当前是否是第一张
	if (picIndex == 0) {
		picIndex = LunBo_img.children.length - 1;
		LunBo_img.style.left = (-picIndex * picWidth) + "px";
	}
	// 将索引切换到前一张图片
	picIndex--;
	animate(LunBo_img, -picIndex * picWidth);
	// 清除所有的小按钮的背景颜色
	for (let i = 0; i < anNiu_container.children.length; i++) {
		anNiu_container.children[i].removeAttribute("class");
	}
	anNiu_container.children[picIndex].className = "active";
};

// 设置自动播放
let timeId = setInterval(function () {
	Event();
}, 2000);

// 鼠标放上停止播放
LunBo.onmouseover = function () {
	clearInterval(timeId);
};
// 鼠标离开开始播放
LunBo.onmouseout = function () {
	timeId = setInterval(Event, 2000);
};

4、效果展示