基于HTML5的移动Web应用——Bootstrap 样式案例：制作轮播图特效

最新推荐文章于 2024-08-18 14:32:13 发布

sem00000

最新推荐文章于 2024-08-18 14:32:13 发布

阅读量3.1k

点赞数 3

分类专栏：前端移动WEB开发文章标签： html css

本文链接：https://blog.csdn.net/sem00000/article/details/106095096

版权

前端同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

移动WEB开发

14 篇文章 0 订阅

订阅专栏

需求说明

使用轮播图插件布局网页的结构和样式
图片切换的等待时间是2秒
修改轮播图的样式，隐藏左右两边的控制箭头，不过点击左右两侧原来按钮的位置依然可以控制图片切换

运行效果
在这里插入图片描述

参考代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>美联英语在线VIP-真人在线英语学习-美联英语免费在线学习网站 - 美联英语在线VIP</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/myCSS.css"/>
</head>
<body>
    <!--top-->
    <div class="clearfix" id="layout_toper">
    <div class="container">
        <div class="clearfix">
            <div class="pull-left ">
                <span>
                    <i class="glyphicon glyphicon-phone-alt"></i>
                    &nbsp;400-777-8828
                </span>
                <span >&nbsp;</span>
                <a class=" ltitem " href="javascript:;" lang="101">
                    中文
                </a>
                <a class=" ltitem " href="javascript:;" lang="102">
                    英文
                </a>
            </div>
            <div class="pull-right">
                <a class="btn btn-danger btn-sm" href="#">免费注册</a>
                <a class="btn btn-default btn-sm" href="#" data-toggle="modal">登录</a>
            </div>
        </div>
    </div>
</div>

    <!--焦点图-->
    <section class="carousel slide" id="shared_carousel" data-ride="carousel">
        <!-- 序号 -->
        <ol class="carousel-indicators">
            <li class="active" data-target="#shared_carousel" data-slide-to="0"></li>
            <li class="" data-target="#shared_carousel" data-slide-to="1"></li>
            <li class="" data-target="#shared_carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active" style="background-color:#ffffff;">
                <img class="img-responsive" src="image/img1.jpg" alt="...">
                <div class="carousel-caption">
                    <span class="subject"></span>
                </div>
            </div>
            <div class="item" style="background-color:#ffffe5;">
                <img class="img-responsive" src="image/img2.jpg" alt="...">
                <div class="carousel-caption">
                    <span class="subject"></span>
                </div>
            </div>
            <div class="item">
                <img class="img-responsive" src="image/img3.jpg" alt="...">
                <div class="carousel-caption">
                    <span class="subject"></span>
                </div>
            </div>
        </div>
        <a class="left carousel-control " data-slide="prev" href="#shared_carousel" role="button">
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control " data-slide="next" href="#shared_carousel" role="button">
            <span class="sr-only">Next</span>
        </a>
    </section>





<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.min.js"></script>
    <script>
        //两秒钟执行一次
            $('.carousel').carousel({
                interval: 2000
            })
    </script>
</body>


</html>

mycss.css


body {
    font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important;
}
#layout_toper {
    height: 35px;
    line-height: 35px;
    background-color: gray;
    color: #fff;
}
.ltitem{
    color: #fff;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
}
.ltitem:hover{
    color: #fff;
    background: #bdbdbd;
}