C1-简易轮播图-html css javascript

说明

⼤多数⼩公司的⼯程师需要处理的数据量很少,只要完成业务功能就可以,学不学数据结构和算法没有任何差别。⼤⼚就完全不同
了——⼤⼚的⼯程师可能会⾯对⼏千万甚⾄⼏亿的注册⽤户,开发的是TB、PB级别的数据处理系统,需要利⽤各种中间件整合衔
接多个上下游系统——可⽤性、健壮性、响应速度这些最基本的性能指标是⼯程师时时刻刻都要关注和解决的问题。⼀个看似简单
的使⽤ArrayList还是LinkedList的决定,就可能会造成系统⼏千倍的性能差别——这既是整个计算机科学最让⼈着迷的地⽅,也是
最能体现思维模式、开发⽔平、动⼿能⼒的领域。

实现如图的效果

自动转换图片
C1-简易轮播图-html css javascript_第1张图片

C1-简易轮播图-html css javascript_第2张图片
也可以点击转换

我用的是Visual Studio Code

这里涉及html,css,javaScript

在这里插入图片描述


通过编码实现需求

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <div class="w">
        <div class="main">
            <div class="focus fl">
                <a href="JavaScript:;" class="arrow-l">&lt;</a>
                <a href="JavaScript:;" class="arrow-r"></a>
                <ul>
                    <li><img src="upload/01.jfif" alt=""></li>
                    <li><img src="upload/02.jfif" alt=""></li>
                    <li><img src="upload/03.jfif" alt=""></li>
                   
                </ul>
                <ol class="circle">

                </ol>
            </div>
        </div>
    </div>
</body>

</html>

代码css


  • 作者:麦克猫Cat

  • 本文版权归作者和CSDN共有,欢迎交流

你可能感兴趣的:(html,css,javascript)