Question

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

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

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

<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

你可以使用CSS为你的图像添加一个额外的div，并用js动画，代码太长了，不能把它放在这里但只是为了帮助你走，我为你做了一个小提琴。请参阅下面评论中的小提琴示例。

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

1 个答案: