Question

我创建了jquery图像滑块，它运行良好。但是我在滑块中显示缩略图图像时遇到问题。这是我的问题：在我的滑块下有四个缩略图，在每张幻灯片上你可以看到女巫形象是“活跃的”，但我的缩略图（现在它们只是字母）只能工作到最后一张幻灯片并且然后它刹车:(
这是 THE FIDDLE 的完整代码。

这是我选择缩略图的代码：

是的，有人能帮帮我吗？谢谢!!!

  /*CODE WORKING UNTIL LAST SLIDE*/
 $('.control_active').removeClass('control_active').next('li').addClass('control_active');
      <!--------------------------------------------------------------------------------->

Answer 1

快速而肮脏的解决方案是设置标志并切换：

var slide_text = {
  red: $('.redcontrol'),
  blue: $('.bluecontrol'),
  green: $('.greencontrol'),
  yellow: $('.yellowcontrol')
}

var wash = function()
{
  for( var key in slide_text )
  {
    if( slide_text.hasOwnProperty(key) )
    {
      slide_text[key].removeClass('control_active');
    }
  }
}

var n = 0;
switch( n )
{
  //red
  case 0:
    wash();
    slide_text.red.addClass( 'control_active' );
    n++;
    break;

  //blue
  case 1:
    wash();
    slide_text.blue.addClass( 'control_active' );
    n++;
    break;

  //green
  case 2:
    wash();
    slide_text.green.addClass( 'control_active' );
    n++;
    break;

  //yellow
  case 3:
    wash();
    slide_text.yellow.addClass( 'control_active' );
    n = 0;
    break;
}

Answer 2

我已经为我的问题做了非常简单的解决方案:) 基本上我正在检查 last li标签上是否有课程。如果最后 li标签上有一个类，则将类添加到第一个 li，但仅当第一个图像再次启动其动画时......这是WORKING FIDDLE。
这是代码：

   /*THIS CODE IS WORKING LIKE A CHARM YEEEY!!!*/ 
   <!----------------------------------------------->         
$('.control_active').removeClass('control_active').next('li').addClass('control_active');
if ($('.textcontrols ul li:last').hasClass('control_active')) {
  $('.textcontrols ul li:first').addClass('control_active');
 }
<!-------------------------------------------->

Jquery缩略图图像幻灯片

2 个答案: