jquery循环插件，嵌套幻灯片，’后’选项或测试第一张和最后一张图像

在我的嵌套幻灯片中，我有’上一页’和’下一页’控件。 如果您在第一张幻灯片上，我希望能够减少’prev’的css不透明度，如果您在最后一张幻灯片上，我希望能够降低’next’的css不透明度。

‘after：onAfter’选项已经足够了但是当放置在嵌套幻灯片控件的代码中时它似乎不起作用。

有没有办法在嵌套幻灯片中正确实现’after’，或者在嵌套幻灯片中测试第一个和最后一个图像？ 谢谢

这是我的代码。

       $(document).ready(function() { // init and stop the inner slideshows var inners = $('.inner-slideshow').cycle().cycle('stop'); var slideshow = $('#slideshow').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav', pagerAnchorBuilder: function(idx, slide) { // return sel string for existing anchor return '#nav li:eq(' + (idx) + ') a'; }, before: function() { // stop all inner slideshows inners.cycle('stop'); // start the new slide's slideshow $(this).cycle({ fx: 'scrollHorz', speed: 'fast', timeout: 0, prev: '#prev', next: '#next', nowrap: 1 }); } }); });     
 
Top Slidehsow 1
 
Top Slidehsow 2
 
 
 < Prev Next > 
 
 
   
 
    
 
   

Answer 1

我想这就是你想要的（编辑你的例子）： http ： //jsfiddle.net/m8AFG/18/

 $(document).ready(function() { // init and stop the inner slideshows var inners = $('.inner-slideshow').cycle().cycle('stop'); var slideshow = $('#slideshow').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav', pagerAnchorBuilder: function(idx, slide) { // return sel string for existing anchor return '#nav li:eq(' + (idx) + ') a'; }, before: function() { // stop all inner slideshows inners.cycle('stop'); // start the new slide's slideshow $(this).cycle({ fx: 'scrollHorz', speed: 'fast', timeout: 0, prev: '#prev', next: '#next', nowrap: 1, after: function() { $('#prev').removeClass('opac'); $('#next').removeClass('opac'); var countImg = $(this).siblings().size(); if ($(this).index() == 0) $('#prev').addClass('opac'); if ($(this).index() == countImg) $('#next').addClass('opac'); } }); } }); }); 

添加了css opacity和jquery和循环脚本链接，它工作正常

问候，迈克尔

Answer 2

知道你正在使用什么插件会很有帮助，但是大多数滑块插件都有一个可以添加函数的参数，每次实际滑动时都会调用它，比如’onChange’。 如果这个插件具有这样的function，你可以使用一些简单的Javascript来直接操作CSS或元素，或者为它们添加一个类以允许你在CSS中操作它们。

所以你需要知道当前的索引 – 看起来像’idx’可能会提供，然后你会做类似的事情（伪代码）

 if(currentSlideNumber == slides.length){ //Reduce opacity of next tab }else if(currentSlideNumber == 1){ //Reduce opacity of previous tab } 

其中’currentSlideNumber’是当前索引，而slides.length计算幻灯片的数量 – 在Javascript中将是：

 $('.inner-slideshow').children('img').length