Question

我有这个简单的水平幻灯片（我现在已经工作了一段时间），用左/右按钮来导航它。它没有“连续”播放 - 单击相应按钮时返回到开头或结尾。这是jQuery代码：

var menuItem_place = 0;
var menuItem_position = 0;
var menuItem_limit = parseInt($('.menuItem').length) - 1;

$('.menuItem:first .content').css({margin: 0, height: '100%', lineHeight: '99px'})

// Rocks menu scroll LEFT button mouse events
$('#rocksMenu_btnLeft').on('mouseenter', function(){
  $(this).animate({'background-position-x':'-26px'}, 150);
});
$('#rocksMenu_btnLeft').on('mouseleave', function(){
  $(this).stop(true).animate({'background-position-x':'-52px'}, 150);
});
$('#rocksMenu_btnLeft').on('click', function(){
  $(this).animate({'background-position-x':'0px'}, 150,
    function(){
      $(this).animate({'background-position-x':'-26px'}, 150);
      // Slide items backward
      if (menuItem_place > 0){
       menuItem_place --;
      }
      menu_animateClick();
    }
  );
});

// Rocks menu scroll RIGHT button mouse events
$('#rocksMenu_btnRight').on('mouseenter', function(){
  $(this).animate({'background-position-x':'-26px'}, 150);
});
$('#rocksMenu_btnRight').on('mouseleave', function(){
  $(this).stop(true).animate({'background-position-x':'0px'}, 150);
});
$('#rocksMenu_btnRight').on('click', function(){
  $(this).animate({'background-position-x':'-52px'}, 150,
    function(){
      $(this).animate({'background-position-x':'-26px'}, 150);
      // Slide items forward
      if (menuItem_place < menuItem_limit){
        menuItem_place ++;
      }
      menu_animateClick();
    }
  );
});

function menu_animateClick() {
    menuItem_position = 0 - (menuItem_place * 200);
    $('#menuContainer').stop().animate({left: menuItem_position + 'px'}, 300);
}

我想将该功能添加到我的代码中 - FIDDLE

感谢名单。

佩德罗

Answer 1

我在menuItem_place的每个增量和减量中添加了一个else语句。

if(menuItem_place > 0)
       menuItem_place --;
        else
      menuItem_place  =3;

和

  if (menuItem_place < menuItem_limit){
    menuItem_place ++;
  }
    else
     menuItem_place = 0;

http://jsfiddle.net/64tu2/4/

在我的幻灯片中添加“循环模式”

1 个答案: