如何通过 Carousel 中的 Javascript 代码更改背景图像？

Posted 2023-05-08

【中文标题】如何通过 Carousel 中的 Javascript 代码更改背景图像？

【英文标题】：How can I change background image via Javascript code in Carousel?

【发布时间】：2021-08-06 15:00:14

【问题描述】：

我有一个 Slider 对象，其中包含图像的 SliderImageUrl。

这是我的 c# 代码，用于在 html 部分中显示滑块列表。

ViewBag.Slider = db.Slider.ToList().OrderByDescending(x => x.SliderId);

我想在单击轮播中的上一个或前进按钮时更改背景图像。

我写了一个模板js代码来处理它，但我不知道其他事情。

当我打开页面时，会显示第一个滑块。当我单击上一个按钮时，我想在部分部分的背景图像中显示最后一个滑块的图像。 当我显示最后一个滑块背景图像然后单击前进按钮时，它会显示第一个滑块。 当我单击上一个或前进按钮时，将完成更改进程。

我该如何处理这个过程？

这是我的HTML 代码，如下所示。

<section id="hero" class="d-flex justify-cntent-center align-items-center">
    <div id="heroCarousel" class="container carousel carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">


        @foreach (var item in @ViewBag.Slider)
        

           <div class="carousel-item">
                    <div class="carousel-container">
                        <h2 class="animate__animated animate__fadeInDown">@item.SliderAd</h2>
                        <p class="animate__animated animate__fadeInUp">@item.SliderKisaAciklama</p>
                        <a href="#lastnews" class="btn-get-started animate__animated animate__fadeInUp">Sayfaya Git</a>
                    </div>
          </div>
          
    
            <a id="previous_button" class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
            </a>
    
            <a id="forward_button" class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
            </a>
      </div>
    </section>

这是我的javascript 代码，如下所示。

<script>

    $(document).ready(function () 

        var myArray = [];

        @foreach (var item in @ViewBag.Slider)
        
            @:myArray.push(item);
        

        var el = document.getElementById("previous_button");
        if (el) 
            addEventListener("click", switchImage1());
        
        var el2 = document.getElementById("forward_button");
        if (el2) 
            addEventListener("click", switchImage2());
        
    );

    function switchImage1(imageUrl) 
        $('#hero').css('background-image', "url('+ imageUrl +')");
    
    function switchImage2(imageUrl) 
        $('#hero').css('background-image', "url('+ imageUrl +')");
    

</script>

【问题讨论】：

将$('#hero').css('background-image', "url('+ imageUrl +')"); 更改为$('#hero').css('background-image', "url('"+ imageUrl +"')");

@prettyInPink 如何将参数 imageUrl 发送到 switchImage1 或 switchImage2 函数？我列出了一些项目来展示如何实施该过程。

@prettyInPink 我等着你的回复。

嗨，carousel 已经实现了这个功能，为什么你需要在 js 中这样做？

@Swati Carousel 只覆盖它自己的 div 区域。我想在覆盖轮播的 div 部分中覆盖背景图像。我怎样才能做到这一点？我编辑了我的帖子。

【参考方案1】：

解决方案如下所示。

$('#hero').css('background-image', "url(" + $(".carousel-item:eq(0)").data("image") + ")");
$("#heroCarousel").on('slide.bs.carousel', function () 
$('#hero').css('background-image', "url(" + $(".carousel-item.active").data("image") + ")");
)