如何创建图片和文字滑动效果

Question

我的 html 部分为

            <section class="w3l-main-slider" id="home">

                <div class="banner-content">
                    <?php 
                    // Array to store banner URLs
                    $banners = [
                        './assets/images/banner1.jpeg',
                        './assets/images/banner2.jpeg',
                        './assets/images/banner3.jpeg',
                    ];
                    $banner_text = [
                        'Text1',
                        'Text2',
                        'Text3',                     
                        ];
                    
                    ?>
                    <div id="demo-1" 
                        data-zs-src='[<?php echo '"' . implode('","', $banners) . '"' ?>]' 
                        data-zs-overlay="dots">
                        <div class="demo-inner-content">
                        <h1 class="mt-1 home-title" style="color:white;">Some text</h1>
                        <center><a class="text-center btn btn-style mt-4" href="text.php">Book with     Us</a></center>
                        </div>
                    </div>
                </div>
            </section>

以及一些进口品

        <!-- Template JavaScript -->
        <script src="assets/js/jquery-3.3.1.min.js"></script>
        <script src="assets/js/theme-change.js"></script>

        <!-- banner slick slider -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/modernizr-2.6.2.min.js"></script>
        <script src="assets/js/jquery.zoomslider.min.js"></script>
        <script src="assets/js/js/jquery.flexslider.js"></script>
        <script src="assets/js/js/jquery.flexslider.js"></script>
        <script src="assets/js/js/jquery.easing.js"></script>
        <!-- //banner slick slider -->

横幅图像按预期滑动，但我希望文本数组中的文本也滑动。

我正在尝试映射文本数组，但它没有按预期工作。

Answer 1

要将文本的滑动效果与幻灯片中的图像同步，您需要设置一种机制来更新文本以响应幻灯片中的更改。这涉及到图像发生变化时动态更新文本。由于您已经在项目的其他部分使用 jQuery，因此我们可以利用 jQuery 高效地实现此效果。

第 1 步：修改 HTML 结构

首先，您需要调整 HTML 以包含随每张幻灯片而变化的动态文本的占位符。在图像滑块下方，您可以为文本添加 HTML 元素。

<section class="w3l-main-slider" id="home">
    <div class="banner-content">
        <div id="demo-1" data-zs-src='[<?php echo '"' . implode('","', $banners) . '"' ?>]' data-zs-overlay="dots">
            <div class="demo-inner-content">
                <h1 class="mt-1 home-title" id="dynamic-text" style="color:white;">Some text</h1>
                <center><a class="text-center btn btn-style mt-4" href="text.php">Book with Us</a></center>
            </div>
        </div>
    </div>
</section>

注意

id="dynamic-text"

添加到

<h1>

标签中。这是文本将动态变化的地方。

第 2 步：将文本数组传递给 JavaScript

由于您使用 PHP 来处理服务器端逻辑，因此您可以将文本数组直接回显到 JavaScript 变量中，如下所示：

<script>
    var bannerTexts = <?php echo json_encode($banner_text); ?>;
</script>

第 3 步：JavaScript 更新文本

现在，您需要添加必要的 JavaScript，以便在幻灯片更改时更新文本。根据您的设置，您似乎正在使用 jQuery 插件（如

zoomslider

或

flexslider

）。您需要使用滑块插件提供的回调函数来检测幻灯片的变化。

假设您使用的是常见的滑块插件，通常具有

after

或

before

幻灯片更改事件，您的 JavaScript 代码可能如下所示：

$(document).ready(function () {
    // Assuming you're using FlexSlider
    $('#demo-1').flexslider({
        animation: "slide",
        controlNav: true,
        directionNav: true,
        slideshowSpeed: 5000,
        animationSpeed: 600,
        after: function (slider) { // Callback function after slide changes
            var currentSlide = slider.currentSlide; // Current slide index
            $('#dynamic-text').text(bannerTexts[currentSlide]); // Update text based on current slide
        }
    });
});

注：

• 确保仅加载一个版本的 jQuery： 您已包含

  jquery.min.js

  在 HTML 导入中两次，这可能会导致 问题。仅保留对 jQuery 的一个引用。
• 根据您实际的滑块插件调整回调函数： 上面的代码假设您可能正在使用

  flexslider

  ，但是您的设置 提到了

  zoomslider

  和

  flexslider

  两者。您需要检查 正确的事件处理程序和属性的文档。
• 初始化和冲突：确保滑块已初始化 正确并检查控制台中是否存在任何 JavaScript 错误 可能会阻止滑块按预期工作。

此方法将使您的文本与图像幻灯片同步，并在每张新幻灯片进入视图时更新文本显示。