javascript - jquery 幻灯片使用图像幻灯片容器添加内容

Question

首先解释一下当前的功能: 在我的网页上，我使用 jquery cycle plugin滑动图像。这非常有效，但现在我想扩展此功能，以便为幻灯片内的每个图像添加文本。 我有内部 View

<div id="background-slides">
      <div class="slide">
            <img src="/Images/slider/0.jpg" alt="initial image" />
       </div>
 </div>

在 View 内的同一页面上，我添加幻灯片图像

<script type='text/javascript'>
        var backgroundSlides = new Array();
        backgroundSlides.push('/Images/slider/1.jpg');
        backgroundSlides.push('/Images/slider/2.jpg');
        backgroundSlides.push('/Images/slider/3.jpg');
</script>
if ($('#background-slides .slide').length) {
      $('#background-slides').cycle({
            speed: 1000,
            swipe: true,
            delay: 2000,
            timeout: 6000,
            fx: 'zoom',
            slides: '.slide',
            next: '.right',
            prev: '.left'
        });
       $.each(backgroundSlides,
                function (intIndex, objValue) {
                    var newSlide = '<div class="slide"><img src="' + objValue + '" /></div>';
                    $('#background-slides').cycle('add', newSlide);
                }
       );
     }
});

我的问题是: 如何在每个幻灯片更改上添加包含与该幻灯片相关的一些内容的 div，例如幻灯片 1 上的 MSG 1、幻灯片 2 上的 MSG 2 等。

Answer 1

您可以在图像中添加一个额外的 div，使用 CSS 对其进行样式设置并使用 js 进行动画处理，代码太长，无法将其放在这里，但只是为了帮助您，我为您做了一个 fiddle 。只需在下面的评论中查看 fiddle 示例即可。