javascript - 在轮播导航点击更改背景图像
问题描述
我正在使用 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);
});
解决方案
我为您制作了两个按钮的单击事件代码 -.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>推荐阅读
- java - GSON解析多个相同类型的key
- python - 如何将（.gz）数据集加载到谷歌云（使用python）
- angular - 如何为带有 router.events 下标的组件编写单元测试？
- css - Slick Slider 在打开折叠引导程序 4 时损坏
- echarts - echarts 馅饼拖动重新计算不工作 echarts 新版
- angular - 如何在功能模块中使用@ngrx/router-store
- python - 数学度坐标到气象度坐标
- powershell - 使用 power shell 脚本关闭对话框
- docker - 用命令替换 docker-compose.yml 中的环境变量
- html - Flexbox 页脚错误地缩小