【HTML轮播图】

最新推荐文章于 2024-10-18 14:58:16 发布

今夜鸣风

最新推荐文章于 2024-10-18 14:58:16 发布

阅读量8.6k

点赞数 3

分类专栏：菜鸟学习前端文章标签： html bootstrap

本文链接：https://blog.csdn.net/akisi/article/details/121848953

版权

这篇博客介绍了如何利用Bootstrap v4快速设置HTML轮播图。首先从Bootstrap官网获取CSS文件和集成包代码，放入<head>标签内。接着，参照官网组件中的轮播选项，插入相应的轮播代码段来实现轮播效果。

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

这次讲的是一个快捷设置轮播图，使用插件实现轮播图效果的方式。

首先导航栏搜索bootstrap进入官网，版本选择v4，然后点击快速入门复制css文件和集成包的代码在head标签内部。

复制完以上代码之后找到组件中的轮播选项，找到轮播代码设置的代码段，如图所示：

完整框架和代码如下：

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

<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>小米</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</head>
<style>
    #carouselExampleIndicators {
        width: 1000px;
        height: 900px;
        float: left;
        position: absolute;
        left: 337px;
        top: 130px;
    }
    
    .gongjvlan {
        width: 1500px;
        height: 30px;
        background: rgb(85, 82, 82);
        border: 5px solid rgb(85, 82, 82);
        line-height: 30px;
        text-align: left;
        font-size: 13px;
        color: white;
    }
    
    .head {
        width: 1500px;
        height: 100px;
        float: left;
        background: white;
    }
    
    .head1 {
        width: 30px;
        height: 20px;
        text-align: center;
        position: absolute;
        right: -1px;
        top: 3px;
        background: orange;
        opacity: 0;
    }
    
    .head1:hover {
        opacity: 1;
    }
    
    .zhuti {
        width: 200px;
        height: 700px;
        background: rgb(161, 159, 159);
        border: 10px solid rgb(161, 159, 159);
        text-align: center;
        font-size: 15px;
        color: white;
        float: left;
        position: relative;
        left: 110px;
    }
    
    .paimian {
        width: 1500px;
        height: 700px;
        float: left;
    }
    
    .diyikuan {
        width: 1500px;
        height: 300px;
        float: left;
        position: absolute;
        left: 119px;
        top: 880px;
        border: 1px solid white;
    }
    
    .yy {
        width: 218px;
        height: 200px;
        float: left;
        background-color: black;
    }
    
    .jj {
        width: 1000px;
        height: 200px;
        opacity: 1;