简易轮播图（最全代码解析）JavaScript（ES6面向对象）

原创

已于 2022-03-04 15:45:28 修改 · 613 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6

于 2021-09-08 18:32:59 首次发布

本文详细解析了如何使用JavaScript（ES6语法）的面向对象编程方式来创建一个简易轮播图，提供了完整的代码示例，帮助读者理解并实现轮播效果。

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ES6轮播图</title>
    <script></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid silver;
            overflow: hidden;
            margin: auto;
            margin-top: 50px;
            position: relative;
            top: 0;
            left: 0;
        }
        .outer {
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            transition: .3s all linear;
        }
        .img {
            width: 500px;
            height: 300px;
            float: left;
        }
		.btns span {
			position: absolute;
			width: 25px;
			height: 40px;
			top: 50%;
			margin-top: -20px;
			line-height: 40px;
			text-align: center;
			font-weight: bold;
			font-family: Simsun;
			font-size: 30px;
			border: 1px solid silver;
			opacity: 0.5;
			cursor: pointer;
			color: #fff;
			background: black;
		}
		.btns .left {
			left: 5px;
		}
		.btns .right {
			left: 100%;
			margin-left: -32px;
		}
        .right > :first-child, .left > :first-child {
            width: 35px;
            height: 35px;
        }
        .oOl {
            width: 163px;
            position: absolute;
            right: 0;
            left: 0;
            margin: a