jQuery的幻灯片添加具有图像幻灯片容器

首先讲解内容目前的功能：在我的网页我使用jquery cycle plugin滑动图像。这完美的作品，但现在我想以添加和文本内滑动每个图像扩展此功能。内部视图我有jQuery的幻灯片添加具有图像幻灯片容器

<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); 
       } 
     ); 
    } 
});

我的问题是：如何每张幻灯片更改添加格与相关的一些内容幻灯片，例如幻灯片1上的MSG 1，幻灯片2上的MSG 2等。

来源

2015-12-21 panjo

从我看到'cycle'只适用于图像。这意味着你不能添加任何内容给他们。您可以使用每个图像的'：before'和'：after'伪元素，但是存在太多限制，缺点和潜在的浏览器不兼容性，因此不是一个好主意。你需要寻找一个动画的div，而不是图像，如果这就是你想要的插件。 –

您可以为CSS添加额外的div样式，并使用js进行动画，代码太长而无法放置，只是为了帮助你去我已经做了捣鼓你。请看下面的评论中的小提琴示例。

来源

2015-12-21 22:45:52 Franco

这里是提琴：https://jsfiddle.net/6t0ce4Lb/。请注意，在小提琴插件代码是在'JavaScript'部分只是为了使这个工作，但你不需要那里，因为你已经拥有它。 – Franco

jQuery的幻灯片添加具有图像幻灯片容器

回答

相关问题