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

飒尔

已于 2022-03-04 15:45:28 修改

阅读量536

点赞数

分类专栏： javascript 文章标签： javascript es6

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

本文链接：https://blog.csdn.net/CSErtuh/article/details/120186188

版权

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

摘要由CSDN通过智能技术生成

完整代码：

<!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: auto;
            bottom: 10px;
            list-style: none;
        }
        .oLi {
            width: 25px;
            height: 25p

最低0.47元/天解锁文章

飒尔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简易轮播图（最全代码解析）JavaScript（ES6面向对象）

完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ES6轮播图</title> <script></script> <style> * { margin: 0; padding: 0; ...
复制链接

扫一扫

专栏目录