1. JavaScript 基础

  2. 函数进阶

  3. 深入数据和类型

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 错误处理

  10. 异步编程

  11. 网络请求

  12. 模块

  13. 练习

  14. 实例

  15. 工具与规范

$$demo <div class="carousel"> <div class="container"> <img src="./assets/诸葛亮.jpg" /> <img src="./assets/进击.jpg" /> <img src="./assets/进击-大.jpg" /> </div> <div class="shift"> <div class="btn" onclick="leftShift()"><</div> <div class="btn" onclick="rightShift()">></div> </div> <div class="bottom"></div> </div>

<script> let index = 0

// 图片的数量
let imageCount = document.querySelectorAll(
    ".carousel .container img"
).length

const bottom = document.querySelector(".carousel .bottom")
for (let i = 0; i < imageCount; i++) {
    // 创建底部按钮
    const indicator = document.createElement("div")
    indicator.classList.add("indicator")
    indicator.onclick = () => setIndex(i)

    bottom.append(indicator)
}

let freshWrapper = (func) => {
    return function (...args) {
        let result = func(...args)
        fresh()
        return result
    }
}

let leftShift = freshWrapper(() => {
    index -= 1
})

let rightShift = freshWrapper(() => {
    index += 1
})

let setIndex = freshWrapper((idx) => {
    index = idx
})

let timer = setTimeout(rightShift, 3000)
function fresh() {
    if (index < 0) {
        index = imageCount - 1
    } else if (index >= imageCount) {
        index = 0
    }

    carousel = document.querySelector(".carousel")

    let width = Number(getComputedStyle(carousel).width.slice(0, -2))

    carousel.querySelector(".container").style.left =
        index * width * -1 + "px"

    clearTimeout(timer)
    timer = setTimeout(rightShift, 3000)
}

</script>

<style> .carousel { width: 800px; height: 400px;

    margin: 0 auto;

    overflow: hidden;

    position: relative;
}

.carousel .container {
    width: 100%;
    height: 100%;

    display: flex;
    transition: all 1s;

    position: relative;
    left: 0;
}

.carousel .container img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    flex-shrink: 0;
}

.carousel .shift {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    padding: 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    /* 禁止选中 */
    user-select: none;
}

.carousel .shift .btn {
    background-color: teal;
    color: white;

    font-size: 40px;
    font-weight: bold;

    width: 50px;
    height: 50px;

    line-height: 50px;
    text-align: center;

    border-radius: 8px;
    opacity: 0.5;

    cursor: pointer;
}

.carousel:hover .shift .btn {
    /* 悬浮时显示按钮 */
    opacity: 1;
}

.carousel .bottom {
    position: absolute;

    bottom: 20px;
    left: 0;
    right: 0;

    width: max-content;
    margin: auto;

    display: flex;
    gap: 10px;
}

.carousel .bottom .indicator {
    height: 5px;
    width: 40px;
    background-color: teal;
    opacity: 0.5;

    cursor: pointer;
}
.carousel:hover .bottom .indicator {
    /* 悬浮时显示按钮 */
    opacity: 1;
}

</style>

$$