html+css轮播图

ybb_ymm

已于 2023-03-02 17:02:42 修改

阅读量2.4k

点赞数 2

分类专栏： HTML5 文章标签： css html 前端

于 2022-12-31 07:46:32 首次发布

本文链接：https://blog.csdn.net/ybb_ymm/article/details/128502635

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

昨天收到腾讯云客服电话，告知我网站域名备案后无法正常访问，管局会在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控制并未实现，大家可以发挥一下自己也是能写出来的！谢谢大家！

欢迎大家关注我的公众号《coder练习生》

ybb_ymm

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css轮播图

昨天收到腾讯云客服电话，告知我网站域名备案后无法正常访问，管局会在25号强制解除备案！我也是醉了，这坑货客服收到告知后部立刻联系，等到或到期了，联系我，无奈只能随便先写个东西放上去应付一下了！这样便想到了手搓一个原生html、css、js的图片轮播图！正好符合网站的内容形式！
复制链接

扫一扫