欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Bootstrap插件实现轮播效果(自动、手动)

程序员文章站 2022-01-06 07:44:49
使用Bootstrap插件实现轮播效果(自动、手动)...

Bootstrap实现简单的轮播效果

注:
1、本示例代码使用的是jQuery-3.5.1、Bootstrap-4.5.0、HTML5、CSS3
2、本示例仅实现了点击切换、自动轮播的效果

1、本地引入bootstrap的css和js文件

   <script src=".././wedapp/lib/jquery-3.5.1.js"></script>
   <link href="./css/bootstrap.css" rel="stylesheet"/>
   <script src="./js/bootstrap.js" ></script>

注:jQuery文件的引用应在bootstrap之前,否则会报错。

错误如下图所示
使用Bootstrap插件实现轮播效果(自动、手动)

2、轮播

注:
效果图
使用Bootstrap插件实现轮播效果(自动、手动)

HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Bootstrap4</title>
    <script src=".././wedapp/lib/jquery-3.5.1.js"></script>
    <link href="./css/bootstrap.css" rel="stylesheet"/>
    <script src="./js/bootstrap.js" ></script>
</head>
<style>
    body {
        /*position: relative;*/
        background-color: peru;
    }
    div{
        border: #6c757d 1px solid;
    }
    .hed{
        height: 700px;
    }
    .tirol{
        margin-top: 0;
        /*background-color: papayawhip;*/
    }
</style>
<script>
</script>
<body>
    <div id="carouselExampleIndicators" class="carousel slide hed" data-ride="carousel" style="" data-interval="2000" data-pause="false" data-touch="true">
        <div class="tirol " style="width: 1000px;height: 100px;margin: 0 auto">
            <ul class="carousel-indicators" style=" ">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">
                    <div style="width: 100px;height: 30px"></div>
                </li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1">
                    <div style="width: 100px;height: 30px;margin-left: 10px"></div>
                </li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2">
                    <div style="width: 100px;height: 30px;margin-left: 10px"></div>
                </li>
            </ul>
        </div>
        <div class="carousel-inner" style="width: 1000px;margin: 200px auto;">
            <div class="carousel-item active" style="width: 1000px;background-color: yellowgreen;height: 400px;">
            </div>
            <div class="carousel-item" style="width: 1000px;background-color: #c3e6cb;height: 400px;">
            </div>
            <div class="carousel-item" style="width: 1000px;background-color: #721c24;height: 400px;">
            </div>
        </div>
    </div>
</body>
</html>

1、以上代码只是简单的实现轮播,可*在div中添加相应内容
2、此轮播实现的是幻灯片的旋转木马类似的效果(淡入淡出的效果应添加 .carousel-fade)

淡入淡出效果(carousel-fade)

<div id="carouselExampleIndicators" class="carousel slide hed carousel-fade" data-ride="carousel" style="" data-interval="2000" data-pause="false" data-touch="true">......</div>

data-slide-to 指的是导航栏对应的轮播图片的索引

<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">

轮播时长(单位毫秒)。

data-interval="2000"

指鼠标在进入轮播区域时不停止轮播。
注:默认的是鼠标进入轮播区域时停止轮播,直到鼠标移出轮播区域时继续轮播。

data-pause="false"

轮播是否应支持触摸屏设备上的向左/向右滑动交互。
注:此属性值为 true或false

data-touch="true"

bootstrap.css修改部分代码如下

注:以下代码块为bootstrap.css中的部分代码

.carousel-indicators {
  /*position: absolute;*//*让轮播图的导航部分不属于轮播的子类,从而可以不把导航栏包含在轮播部分中*/
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  /*width: 30px;*//*注释掉的部分是去掉插件自带的样式,实现自定义样式*/
  /*height: 3px;*/
  /*margin-right: 3px;*/
  /*margin-left: 3px;*/
  /*text-indent: -999px;*/
  /*cursor: pointer;*/
  /*background-color: #fff;*/
  /*background-clip: padding-box;*/
  /*border-top: 10px solid transparent;*/
  /*border-bottom: 10px solid transparent;*/
  /*opacity: .5;*/
  /*transition: opacity 0.6s ease;*/
}

若有疑问欢迎大家评论交流一起学习进步!

本文地址:https://blog.csdn.net/m0_46274629/article/details/107489911