一个简单的纯js轮播图

最新推荐文章于 2024-06-18 11:56:32 发布

Sallywa

最新推荐文章于 2024-06-18 11:56:32 发布

阅读量832

点赞数

本文链接：https://blog.csdn.net/Sallywa/article/details/86294337

版权

本文详细介绍了使用纯JavaScript实现轮播图过程中遇到的问题及其解决方案，包括方法声明与调用、块级作用域与闭包、事件冒泡和事件捕获等关键点。同时分享了函数默认参数和函数复用的经验，帮助开发者更好地理解和应用JavaScript。

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

本博客参照了此文章(https://www.cnblogs.com/LIUYANZUO/p/5679753.html)

效果如下：

1 自动播放

2 点击箭头切换

3 点击圆点切换

DOM

    <div id="container" class="container">
        <div class="pics">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2193651974,4181473948&fm=26&gp=0.jpg" alt="">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3057381651,2463402979&fm=26&gp=0.jpg" alt="">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=379963434,28431380&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="buttons">
            <div class="button on"></div>
            <div class="button"></div>
            <div class="button"></div>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>

CSS

<style>
    img{
        height: 400px;
        width: 600px;
    }
    .container{
        position: relative;
        height: 400px;
        width: 600px;
        margin-right: 0;
        overflow: hidden;
        
    }
    .pics{
        z-index: 1;
        position: absolute;
        width: 1800px;
        height: 400px;
    }
    .pics img{
        float: left;
    }
    .arrow {
        position: absolute;
        z-index: 99;
        font-size: 36px;
        top: 180px;
        z-index: 2;
        display: none;
        font-weight: bold;
        line-height: 39px;
        text-align: center;
        width: 40px;
        height: 40px;
        color: #fff;
        background-color: RGBA(0, 0, 0, .3);
        cursor: pointer;