前端必备技能——轮播图（原生代码+插件）

最新推荐文章于 2024-06-17 15:29:34 发布

实习期小潘

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量1.3w

点赞数 40

分类专栏：知识点拓展应用文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_60264901/article/details/121956179

版权

本文详细介绍了如何使用原生代码制作轮播图，包括框架搭建、样式装扮和动画效果的实现。同时，还讲解了Swiper插件的使用方法，提供了一站式解决方案，帮助前端开发者打造吸引用户的动态轮播图。

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

你是否在为页面平平无奇而烦恼？

你是否在为页面特效过于简单而苦恼？

你是否也在为同是前端小白而别人的页面却比自己的更加精美？

如果你看到这篇博客，

你就已经赢在起跑线啦~

因为！！！

这篇博客将教会大家

如何让页面展现出你的独特个性风格并且吸引用户

一看到这个页面就觉得

嗯嗯嗯~~这个网页有点东西~

话不多说，上正题！

轮播图的制作

在制作轮播图的过程中我分成3步：框架的搭建——样式的装扮——动画效果。

1.框架的搭建

如下代码展示，就是先在HTML里搭建出一个框架来：

<body>
    <div class="wrap">
        <!-- 左右箭头按钮 -->
        <a href="javascript:;" class='arrow-l'>&lt</a>
        <a href="javascript:;" class='arrow-r'>&gt</a>
        <!-- 图片用li来装--核心滚动区域 -->
        <ul class='focus'>
            <li>
                <a href="#"><img src="1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="4.jpg" alt=""></a>
            </li>

        </ul>
        <!-- 底部小点点 -->
        <ol class='circle'>

        </ol>
    </div>

2.样式的装扮

如下代码展示，就是先在CSS里装饰出大致的轮播图样子：

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul li {
    list-style-type: none;
}

ol li {
    list-style-type: none;
}

.wrap {
    overflow: hidden;
    position: relative;
    margin: 100px auto;
    width: 500px;
    height: 400px;
    background-color: pink;
}

.wrap ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
    /* 给ul盒子大一点就可以让li浮动起来 */
}

.wrap ul li {
    float: left;
    /* margin-right: 10px; */
    width: 500px;
    height: 400px;
}

.wrap ul li img {
    width: 100%;
    height: 100%;
}

.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 38%;
    text-align: center;
    width: 24px;
    height: 40px;
    line-height: 40px;
    color: white;
    z-index: 999;
    background: rgba(0, 0, 0, .3);
}

.arrow-r {
    position: absolute;
    top: 38%;
    right: 0px;
}

.circle {
    position: absolute;
    bottom: 0;
    left: 39%;
    height: 20px;
    width: 200px;
    /* background-color: skyblue; */
}

.circle li {
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
    background: rgba(0, 0, 0, .3);
}

.circle .current {
    background-color: #fff;
}