堆棧內存溢出
  簡體   English   中英

更改輪播導航上的背景圖像單擊

[英]Changing background-image on carousel navigation click

 原文  2020-11-09 12:49:01  7   1    javascript/ html/ jquery/ css/ bootstrap-4

問題描述

我正在使用 Bootstrap Carousel 並且我正在嘗試更改背景（圖像）以協調特定的幻燈片。 我有 4 張幻燈片和 4 張背景圖片。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My name</title>


    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- CSS -->
     <link rel="stylesheet" type="text/css" href="public/css/styles.css">

    <!--- Font Awesome ------->


    <!-- bootstrap script -->
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  </head>
  <body id="ed-body" class="bg-img0">
    <section id="education">
      <div class="container-fluid">

        <div class="ed-carousel">
          <div id="carouselExampleFade" class="carousel slide carousel-fade" data-interval="false">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="slide-box">
                  <h3 class="slide-title">college 1</h3>
                    <img class="college4-seal" src="public/images/college1-seal.png" alt="college 1 seal">
                    <div class="slide-text">
                      <div class="slide-info row">
                        <p class="slide-year col-lg-3">• Dates</p>
                        <div  class="col-lg-9 slide-details">
                          <p>degree</p>
                        </div>
                      </div>
                      <div class="slide-blurb">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
                      </div>
                    </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="slide-box">
                  <h3 class="slide-title">college 2</h3>
                    <img class="college2-seal" src="public/images/college2-seal.png" alt="college 2 seal">
                    <div class="slide-text">
                      <div class="slide-info row">
                        <p class="slide-year col-lg-3">• dates</p>
                        <div class="col-lg-9 slide-details">
                          <p>degree</p>
                        </div>
                      </div>
                      <div class="slide-blurb">
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="carousel-item">
                <div class="slide-box">
                  <h3 class="slide-title">college 3</h3>
                    <img class="college3-seal" src="public/images/college3-seal.jpg" alt="college3 seal">
                    <div class="slide-text">
                      <div class="slide-info row">
                        <p class="slide-year col-lg-3">• dates</p>
                        <div class="slide-details col-lg-9">
                          <p>degree</p>
                        </div>
                      </div>
                      <div class="slide-blurb">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
                      </div>
                    </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="slide-box">
                  <h3 class="slide-title">college 4</h3>
                    <img class="slide-seal college4-logo" src="public/images/college4-seal.png" alt="college 4 logo">
                    <div class="slide-text">
                      <div class="slide-info row">
                        <p class="slide-year col-lg-3">• dates</p>
                        <div class="slide-details col-lg-9">
                          <p>degree</p>
                        </div>
                      </div>
                      <div class="slide-blurb">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
                      </div>
                    </div>
                </div>
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" 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>
    </section>


    <script src="index.js" charset="utf-8"></script>
 </body>
</html>

  </body>
</html>

我試圖通過使用帶有 background-image 屬性的 CSS 類來更改背景。

CSS

.bg-img0 {
  background-image:url("college1.png");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #000;
  z-index: -1;
}
.bg-img1 {
  background-image:url("college2.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #000;
}
.bg-img2 {
  background-image:url("college3.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #000;
}
.bg-img3 {
  background-image:url("college4.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #000;
}

.college1-seal {
  max-height: 12em;
  max-width: 12em;
  text-align: center;
  align-items: center;
  float: left;
  display: inline-block;
  }
.college2-seal {
  border-radius: 50%;
  background-color: #fff;
  width: 100%;
  height: 100%;
  max-height: 12em;
  max-width: 12em;
  text-align: center;
  align-items: center;
  float: left;
}
.college3-seal {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  max-height: 12em;
  max-width: 12em;
  text-align: center;
  align-items: center;
  float: left;
}
.college4-logo {
  max-height: 12em;
  max-width: 12em;
  float: left;
}
 .carousel-inner {
  padding: 1.5em 10.65em;
  font-size: 1.1em;
  background-filter:blur(50px);
}
.slide-box {
  position: relative;
  padding: 1.25em;
  box-shadow: 0 .5em .333em rgba(0,0,0,.8);
  overflow: hidden;
  border-radius: 2em;
  z-index: 1;
}
.slide-title {
  color: #000;
  font-size: 2em;
  padding: 0 0 .75em;
}
.slide-text {
  margin: 1.5em 0 0 12em;
  padding: 0 0 0 2em;
  height: 12em;
}
.slide-details {
  text-align: left;
}

.slide-info {
  padding: 0 0 1em;
}

我嘗試了許多不同的方法。 這是最有意義的，但 Javascript 不會識別函數外部的 picNum 變量。

jQuery/Javascript

var picNum = 0;

$(".carousel-control-next").click(function() {
  $("#ed-body").removeClass("bg-img" + picNum);
  var picNum = picNum + 1;
  $("#ed-body").addClass("bg-img" + picNum);
});

我已將變量放入函數中，這是我最接近此工作的變量，但每次單擊時 picNum 都會重置為 0，因此它只會轉到第二張圖片。

$(".carousel-control-next").click(function() {
  var picNum = 0;
  $("#ed-body").removeClass("bg-img" + picNum);
  var picNum = picNum + 1;
  $("#ed-body").addClass("bg-img" + picNum);
});

1 個解決方案

解決方案1
 2  2020-11-09 13:13:33

我為您編寫了兩個按鈕的點擊事件代碼 - .carousel-control-next和.carousel-control-prev 。

錯誤在這一行：

var picNum = picNum + 1;

你需要這樣：

picNum++;

我還為您添加了一個 if 條件，如果.bg-img類的數量大於聲明的數量，則分配 0：

if (picNum > count_slide) {
  picNum = 0;
}


 var picNum = 0; var count_slide = $('#carouselExampleFade .carousel-item').length - 1; $(".carousel-control-next").click(function() { $("#ed-body").removeClass("bg-img" + picNum); picNum++; if (picNum > count_slide) { picNum = 0; } $("#ed-body").addClass("bg-img" + picNum); }); $(".carousel-control-prev").click(function() { $("#ed-body").removeClass("bg-img" + picNum); picNum--; if (picNum < 0) { picNum = count_slide; } $("#ed-body").addClass("bg-img" + picNum); });
 .bg-img0 { background-image:url("https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874__340.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; color: #000; z-index: -1; } .bg-img1 { background-image:url("https://img5.goodfon.ru/wallpaper/nbig/f/96/blue-luxury-background-sparkle-fon-sinii-blestki.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; color: #000; } .bg-img2 { background-image:url("https://image.freepik.com/free-photo/red-blue-smoke-on-background_36326-1255.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; color: #000; } .bg-img3 { background-image:url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; color: #000; } .college1-seal { max-height: 12em; max-width: 12em; text-align: center; align-items: center; float: left; display: inline-block; } .college2-seal { border-radius: 50%; background-color: #fff; width: 100%; height: 100%; max-height: 12em; max-width: 12em; text-align: center; align-items: center; float: left; } .college3-seal { border-radius: 50%; width: 100%; height: 100%; max-height: 12em; max-width: 12em; text-align: center; align-items: center; float: left; } .college4-logo { max-height: 12em; max-width: 12em; float: left; } .carousel-inner { padding: 1.5em 10.65em; font-size: 1.1em; background-filter:blur(50px); } .slide-box { position: relative; padding: 1.25em; box-shadow: 0 .5em .333em rgba(0,0,0,.8); overflow: hidden; border-radius: 2em; z-index: 1; } .slide-title { color: #000; font-size: 2em; padding: 0 0 .75em; } .slide-text { margin: 1.5em 0 0 12em; padding: 0 0 0 2em; height: 12em; } .slide-details { text-align: left; } .slide-info { padding: 0 0 1em; }
 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>My name</title> <!-- bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <!-- CSS --> <link rel="stylesheet" type="text/css" href="public/css/styles.css"> <!--- Font Awesome -------> <!-- bootstrap script --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body id="ed-body" class="bg-img0"> <section id="education"> <div class="container-fluid"> <div class="ed-carousel"> <div id="carouselExampleFade" class="carousel slide carousel-fade" data-interval="false"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="slide-box"> <h3 class="slide-title">college 1</h3> <img class="college4-seal" src="public/images/college1-seal.png" alt="college 1 seal"> <div class="slide-text"> <div class="slide-info row"> <p class="slide-year col-lg-3">• Dates</p> <div class="col-lg-9 slide-details"> <p>degree</p> </div> </div> <div class="slide-blurb"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="slide-box"> <h3 class="slide-title">college 2</h3> <img class="college2-seal" src="public/images/college2-seal.png" alt="college 2 seal"> <div class="slide-text"> <div class="slide-info row"> <p class="slide-year col-lg-3">• dates</p> <div class="col-lg-9 slide-details"> <p>degree</p> </div> </div> <div class="slide-blurb"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="slide-box"> <h3 class="slide-title">college 3</h3> <img class="college3-seal" src="public/images/college3-seal.jpg" alt="college3 seal"> <div class="slide-text"> <div class="slide-info row"> <p class="slide-year col-lg-3">• dates</p> <div class="slide-details col-lg-9"> <p>degree</p> </div> </div> <div class="slide-blurb"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="slide-box"> <h3 class="slide-title">college 4</h3> <img class="slide-seal college4-logo" src="public/images/college4-seal.png" alt="college 4 logo"> <div class="slide-text"> <div class="slide-info row"> <p class="slide-year col-lg-3">• dates</p> <div class="slide-details col-lg-9"> <p>degree</p> </div> </div> <div class="slide-blurb"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" 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> </section> <script src="index.js" charset="utf-8"></script> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 更改背景圖片無效 更改背景圖像滾動 jQuery-背景圖片點擊 將背景圖像更改為 sql 圖像 使用Java腳本更改背景圖像CSS 為什么此代碼未按預期更改背景圖像？ css背景圖像隨動畫而變化 使用JQuery在CSS中更改背景圖像 jQuery的不改變CSS背景圖像屬性 動態更改CSS背景圖像
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM