携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

昨天收到腾讯云客服电话，告知我网站域名备案后无法正常访问，管局会在25号强制解除备案！

我也是醉了，这坑货客服收到告知后部立刻联系，等到或到期了，联系我，无奈只能随便先写个东西放上去应付一下了！

这样便想到了手搓一个原生html、css、js的图片轮播图！正好符合网站的内容形式！废话不多说，具体的内容如下：

1、创建h5页面

h5以<!DOCTYPE html>开头，标记此文件为html5

html标签保过head，其次紧跟body标签，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

</body>
</html>

格式如上，我们只需将我们的css文件在head头中引入，然后将js文件也在head投中引入即可在body标签内来完成我们具体的html代码

2、创建body内的具体html文件

  <div class="mylunbo">
        <a href="javascript:;" class="arrow-l"><</a>
        <a href="javascript:;" class="arrow-r">></a>
        <ul>
            <li>
                <a href="#"><img src="./image/2.png" width="720" height="432" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="./image/1.png" width="720" height="432" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="./image/3.png" width="720" height="432" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="./image/4.png" width="720" height="432" alt="" /></a>
            </li>
        </ul>
        <ol class="circle">

        </ol>
    </div>

具体的代码如上，这就是我们实现轮播的基础页面代码，页面完成了，仅仅是靠这些是无法完成轮播的，如果不加以css代码修饰的话，我们只能看到一个列表在页面上展示，我们需要看一下具体的css样式。

3、css样式

这里我们给mylunbo定义为相对定位，在辅助top、left、right等来辅助控制。具体代码如下：

.mylunbo{
    margin:20px auto;
    position: relative;
    width: 720px;
    height: 432px;
    /*background-color: purple;*/
    overflow: hidden;
}

.mylunbo ul{
    position: absolute;
    top: 0;
    left: 0;
    width:500%;
}
ul li{
    float:left;
    list-style-type: none;
}
ol li{
    list-style-type: none;

如下图所示：

这样我们的轮播图的雏形便是完成了。其实一个简单的轮播图并不难，难的是各种适应，这里只是一个简单的实现，还有左右切换图片的js控制并未实现，大家可以发挥一下自己也是能写出来的！谢谢大家！

html+css轮播图

1、创建h5页面

2、创建body内的具体html文件

3、css样式