js第17天(简单轮播实现)

最新推荐文章于 2024-08-08 23:04:40 发布

小AL

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量141

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_61884985/article/details/126750102

版权

本文介绍了如何从头开始使用JavaScript实现一个简单的轮播图，包括轮播的组成部分、实现步骤，如结构部分、样式、运动函数、自动轮播、导航及分页器功能。通过这个教程，读者将理解轮播图的基本工作原理并能动手创建。

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

前言

轮播在项目开发中是非常常见的，现在也有很多网站里面有很多优秀的轮播模板可以供我们使用，但是在学习期间，我们还是要怎么样去做一个完整的轮播，这样才能打好自己的基础，今天我们就来讲解一下一个简单的轮播怎么实现。

一、轮播的组成部分

轮播的组成部分

轮播可分为自动轮播，以及手动，轮播主要包括导航，分页器，，轮播就类似于一组相片在相框里移动，而这些一组相片就是ul，相框就相当于是一个div盒子，li的父元素ul是div的子元素，放两个a标签，用来控制轮播图前后，html基本就是这样子。

自动轮播就是ul朝着一个方向移动,手动就是当用户点击a标签可以控制轮播图前后，接下来让我们详细介绍如何实现

二、实现步骤

1）实现结构部分

 <!-- 轮播容器 -->
    <div class="swiper-wraper">
        <!-- 相框 -->
        <div class="swiper">
            <ul>
                <li><img src="https://img0.baidu.com/it/u=3581528921,1240497279&fm=253&fmt=auto&app=138&f=JPEG?w=290&h=180" alt=""></li>
                <li><img src="https://img0.baidu.com/it/u=3976857640,424342271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" alt=""></li>
                <li><img src="https://img1.baidu.com/it/u=3010525423,2174731519&fm=253&fmt=auto&app=138&f=JPEG?w=250&h=108></li>
                <li><img src="https://img1.baidu.com/it/u=1795774216,700108386&fm=253&fmt=auto&app=138&f=JPEG?w=220&h=144" alt=""></li>
                <li><img src="https://img0.baidu.com/it/u=4075851619,2742157346&fm=253&fmt=auto&app=138&f=JPEG?w=464&h=186" alt=""></li>
                <li><img src="https://img0.baidu.com/it/u=3581528921,1240497279&fm=253&fmt=auto&app=138&f=JPEG?w=

最低0.47元/天解锁文章

小AL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js第17天(简单轮播实现)

轮播在项目开发中是非常常见的，现在也有很多网站里面有很多优秀的轮播模板可以供我们使用，但是在学习期间，我们还是要怎么样去做一个完整的轮播，这样才能打好自己的基础，今天我们就来讲解一下一个简单的轮播怎么实现。
复制链接

扫一扫