Bootstrap实战---轮播图

最新推荐文章于 2022-01-11 23:42:10 发布
最新推荐文章于 2022-01-11 23:42:10 发布
阅读量559 收藏
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118641666
版权

Bootstrap实战—轮播图
心得：感觉可以直接引用前端特效，不用全部自己写，而且jQuery还不会。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>融职教育</title>
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--引入Bootstrap CSS-->
    <link rel="stylesheet" href="css/bootstrap.css">

    <style>

    </style>

</head>
<body>

    <!--轮播图移动设备开始-->
    <div class="mt-2 d-lg-none">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                          <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                          <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
                          <li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
                        </ol>
                        <div class="carousel-inner">
                          <div class="carousel-item active">
                            <img src="images/player/1.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>First slide label</h5>
                              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                            </div>
                          </div>
                          <div class="carousel-item">
                            <img src="images/player/2.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Second slide label</h5>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div>
                          </div>
                          <div class="carousel-item">
                            <img src="images/player/3.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Third slide label</h5>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                            </div>
                          </div>
                          <div class="carousel-item">
                            <img src="images/player/4.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Third slide label</h5>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                            </div>
                          </div>
                          <div class="carousel-item">
                            <img src="images/player/5.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Third slide label</h5>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                            </div>
                          </div>
                          <div class="carousel-item">
                            <img src="images/player/6.jpg" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Third slide label</h5>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                            </div>
                          </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                        </a>
                      </div>
                </div>
            </div>
        </div>
    </div>

    <!--轮播图结束-->


    <!--轮播图PC开始-->
    轮播图

    <style>
      .z-Sel {
          background:transparent url('images/sanj.png') no-repeat 4px center;
      }

      .z-notSel {color:#aaa};

  </style>
    
    <section id="player" class="mt-2 d-none d-lg-block" >
      <div class="container">
        <div class="row">
          <div class="col">

            <div id="lunbo" class="carousel">
                <a class="carousel-item active" data-color="#6a296e" target="_blank" href="#">
                  <img src="images/player/1.jpg" class="d-block w-100" alt="...">
                </a>
                <a class="carousel-item" href="#" data-color="#5600d3" target="_blank"  >
                  <img src="images/player/2.jpg" class="d-block w-100" alt="...">
                </da>
                <a class="carousel-item" href="#"  data-color="#0b0f3e" target="_blank" >
                  <img src="images/player/3.jpg" class="d-block w-100" alt="...">
                </a>
                <a class="carousel-item" href="#" data-color="#100e64" target="_blank" >
                  <img src="images/player/4.jpg"  class="d-block w-100" alt="...">
                </a>
                <a class="carousel-item" href="#" data-color="#4477e2" target="_blank" >
                  <img src="images/player/5.jpg"  class="d-block w-100" alt="...">
                </da>
                <a class="carousel-item" href="#" data-color="#110e45" target="_blank" >
                  <img src="images/player/6.jpg"  class="d-block w-100" alt="...">
                </a>
            </div>
  
            <div class="card w-25 border-0 ml-auto shadow mt-4 align-middle" style="font-size:15px;background:rgba(0,0,0, 0.4); line-height:15px;">

                  <div id="rlist" class="list-group">
                    <a href="#" class="list-group-item list-group-item-action text-truncate bg-transparent text-decoration-none text-white-50">最牛Web全栈开发就业班￥9800</a>
                    <a href="#" class="list-group-item list-group-item-action text-truncate bg-transparent text-decoration-none text-white-50 ">最牛Web全栈开发就业班￥980</a>
                    <a href="#" class="list-group-item list-group-item-action text-truncate bg-transparent text-decoration-none text-white-50 ">最牛Web全栈开发就业班￥980</a>
                    <a href="#" class="list-group-item list-group-item-action text-truncate bg-transparent text-decoration-none text-white-50 ">最牛Web全栈开发就业班￥980</a>
                    <a href="#" class="list-group-item list-group-item-action text-truncate bg-transparent text-decoration-none text-white-50  ">最牛Web全栈开发就业班￥980</a>
                    <a href="#" class="list-group-item list-group-item-action text-truncate bg-transparent text-decoration-none text-white-50  ">最牛Web全栈开发就业班￥980</a>
                  </div>

            </div>

          </div>
        </div>
      </div>
    </section>


    <!--轮播图结束-->

    


    <!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>

    <!--轮播图特效-->
    <script>
      $(function(){
          var ptimer  = null;
          var i=0; //指定一个序号
          var sum = $("#lunbo a").length;

          //开启轮播
          function startLunbo() {
              var pbgcolor = $("#lunbo>a").eq(i).attr("data-color");


              $("#lunbo>a").eq(i).fadeIn().siblings().fadeOut(900, function(){
                  $("#player").css("backgroundColor", pbgcolor);
              });

              $("#rlist>a").eq(i).addClass("z-Sel text-white").removeClass('text-white-50').siblings().addClass('text-white-50').removeClass("z-Sel text-white");

          }

          $("#lunbo>a").hover(function(){
              clearInterval(ptimer)
          }, function(){
              iLunbo();
          });

          //自动播放函数
          function iLunbo() {
              clearInterval(ptimer);
              ptimer = setInterval(function(){
                  i++;

                  if(i==sum) {
                      i=0;
                  }

                  startLunbo();
              }, 2000);
          }
          $("#rlist>a").eq(0).addClass('z-Sel text-white').removeClass('text-white-50');
          var pbgcolor = $("#lunbo>a").eq(0).attr("data-color");
          $("#player").css("backgroundColor", pbgcolor);

          //开始自动轮播
          iLunbo();

          var htimer = null;

          $("#rlist>a").mouseover(function(){
              $(this).addClass('text-danger');

              var obj = $(this);
              htimer = setTimeout(function(){
                  clearInterval(ptimer);
                  i=obj.index();
                  startLunbo();
              }, 500);


          }).mouseout(function(){
              $(this).removeClass('text-danger');
              clearTimeout(htimer);
              iLunbo();
          });
      });
  </script>


</body>
</html>
i see the future
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap开发实战之响应式轮播图
01-19
本文主要内容是在导航条的下方做一张轮播图，自动播放最新的重要动态，供大家参考，具体内容如下 一、响应式轮播图 //响应式轮播图 <ol class=carousel-indicators> <li data-target=#myCarousel data-slide-...
bootstrap4-项目
02-18
JavaScript也是Bootstrap不可或缺的一部分，特别是对于交互性组件如模态框、轮播图（Carousel）和 Collapse（折叠）。Bootstrap 4 使用jQuery作为基础库，但同时也提供了适配原生JavaScript的插件版本，以满足不同的...
Bootstrap实战--轮播图
wangxuznb的博客
11-05 416
搭建进度指示器<div id="homepage-feature" class="carousel slide " data-ride="carousel"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#homepage-feature" data-slide-t
Bootstrap实战 - 响应式布局
后除
01-11 2092
响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。
Bootstrap从入门到实战---轮播图
Season CSDN博客
07-07 108
Bootstrap从入门到实战—轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-f
Bootstrap实战---侧边栏卡片和列表组
Season CSDN博客
07-14 629
Bootstrap实战—侧边栏卡片和列表组 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"
bootstrap实战--微金所项目(轮播图1)
qq_44363897的博客
02-13 319
使用HTML+CSS实现响应式轮播图 一、轮播图展示 移动端(< 768px) 非移动端(>768px) 二、轮播图实现思路 移动端 1)、在移动端可以直接使用bootstrap提供的相关代码实现轮播图效果，注意轮播图中的图片应该放在一个a标签中，以便于点击图片跳转。 2)、a标签的宽度应该为100% ，display应该为block 3)、a标签下面的img标签宽度也应该为...
spring boot+bootstrap实现动态轮播图实战
老徐的博客只有干货
12-17 4079
1.bootstrap轮播图 最近开发了个网站需要用到轮播图，正好前端用的事Bootstrap，这里就实战一下。 前提条件： bootstrap4.5 jquery 3张大小适中图片 实现效果： 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-widt
bootstrap实战--微金所项目(轮播图2)
qq_44363897的博客
02-13 289
利用Jquery+css+html来实现 一、实现思路 将a标签通过Jquery的方式动态生成然后添加到相应位置即可 二、相关代码 HTML代码 <!-- 轮播图 --> <!-- 移动端：轮播图图片会随着屏幕的缩小自动适应 --> <div class="wjs_banner"> <div id="carousel-ex...
Bootstrap实战练习---模仿前端网页(导航栏+轮播图+Media)
Season CSDN博客
07-24 1512
Bootstrap实战—模仿前端网页 原网页效果图 连接 我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initi..
第二百五十一节，Bootstrap项目实战--响应式轮播图
weixin_34380296的博客
05-06 178
Bootstrap项目实战--响应式轮播图   学习要点： 　　1.响应式轮播图   本节课我们要在导航条的下方做一张轮播图，自动播放最新的重要动态。   一．响应式轮播图 响应式轮播图   第一步，设置轮播器区域carousel样式class类，写在轮播器&lt;div&gt;里，设置轮播器区域样式(项目实战Bootstrap)slide样式class类，写在轮播器&lt;div&gt;里，设...
bootstrap全套教程-PPT教程
05-07
“项目实战”章节将通过实际案例，演示如何将前面所学的知识应用于完整的网页项目中，帮助学习者巩固技能并提高实际操作能力。 总结起来，这个“bootstrap全套教程-PPT教程”将带领你逐步探索Bootstrap的世界，从...
bootstrap-coursera-repo
02-21
2. **组件**：Bootstrap包含了许多现成的UI组件，如按钮、下拉菜单、模态框、轮播图和表单控件。这些组件可以快速插入到HTML代码中，极大地提高了开发效率。 3. **导航**：Bootstrap提供了多种导航解决方案，如导航...
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
Bootstrap JavaScript插件实战：模态框、选项卡与轮播图
“JavaScript插件.pptx”主要涵盖了Bootstrap框架中的JavaScript插件使用，包括模态框、选项卡、轮播图和滚动监听插件，适合前端开发学习者，特别是北大青鸟课工场的学生预习和复习。文件内容提供了具体的实例，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值