滚动条轮播图/ 循环切换滚动条,图片_轮播图滚动完才能滚动浏览器的滚动条-优快云博客

本文介绍了一个结合Swiper轮播库与Bootstrap框架的网页案例，演示了如何通过JavaScript实现页面元素的动态更新及平滑过渡效果。文章展示了如何配置Swiper进行图片轮播，并利用Bootstrap构建响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap 的 CSS 文件 -->
    <title>Hello, world!</title>
  </head>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.js"></script>

  <!-- swiper -->
  <link rel="stylesheet" href="./package/swiper-bundle.min.css">
  <script src="./package/swiper-bundle.min.js"></script>
  <style>
       
        .myText{
            text-decoration: none;
            position: relative;
            display: inline-block;
        }
        .myText::before{
            width: 100%;
            content: "";
            display: block;
            width: 100%;
            height: 4px;
            border-radius: 6px;
            position: absolute;
            bottom: -5px;
        }
        .myText::before{
            animation-name: js; 
            background-image: linear-gradient(90deg,#04b7f8,#04b7f8);/*渐变颜色*/
            animation-duration:2s;/*设置进度条加载时间*/
            animation-timing-function: linear;/*从低速开始 慢慢变快*/
        }
        .TextLi{
            text-decoration: none;
            cursor: pointer;
        }

        @keyframes js {
            from{
                width: 0;
            }
            to{
                width: 100%;
            }
        }
  </style>
    <body>
    <main>
        <div class="container mt-5 pt-5">
            <div class="row">
                <div class="col-xl-5 text-center">
                    <!-- swiper Start -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper swiper-no-swiping">
                          <div class="swiper-slide"><img src="./1.png" class="img-fluid" alt=""></div>
                          <div class="swiper-slide"><img src="./2.png" class="img-fluid" alt=""></div>
                          <div class="swiper-slide"><img src="./3.png" class="img-fluid" alt=""></div>
                          <div class="swiper-slide"><img src="./4.png" class="img-fluid" alt=""></div>
                        </div>
                    
                      </div>
                    <!-- swiper End -->

                </div>
                <div class="col-xl-7" id="ob">
                    <div class="nav flex-column " id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <a class="TextLi">
                            <p>标题1</p>
                            <p class="progressBar myText">壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹</p>
                        </a>
                        <a class="TextLi" >
                            <p>标题2</p>
                            <p class="progressBar ">贰贰贰贰贰贰贰贰贰贰贰贰贰贰贰</p>
                        </a>
                        <a class="TextLi" >
                            <p>标题3</p>
                            <p class="progressBar ">叁叁叁叁叁叁叁叁叁叁叁叁叁叁叁</p>
                        </a>
                        <a class="TextLi" >
                            <p>标题4</p>
                            <p class="progressBar ">肆肆肆肆肆肆肆肆肆肆肆肆肆肆肆</p>
                        </a>
                      </div>
                </div>
              </div>
        </div>
    </main>

  </body>
</html>
<script>
   var swiper = new Swiper('.swiper-container', {
      loop: true,
      effect: "fade", //默认就是slide位移,fade淡入淡出,cube3d方块,coverflow 3d流
    });


var el = $('.progressBar');
function AutoPlay(sum){
        auto = setInterval(() => {
                sum++;
                if(sum>=el.length){
                    sum = 0;
                }
                swiper.slideTo(sum+1)
                el.each(function(index,item){
                        $(item).removeClass('myText')
                })
                $(el[sum]).addClass('myText');
    }, 2000);
}
AutoPlay(0)

$('.TextLi').click(function(){
        clearInterval(auto)
        let index = $(this).index();
        AutoPlay(index)
        swiper.slideTo(index+1)
        el.each(function(index,item){
            $(item).removeClass('myText')
        })
        $(el[index]).addClass('myText');
})


</script>