Question

我怎么能自动滑动这个滑块link text我对jQuery知之甚少，而不是如何做到这一点。事情是，当我点击一个图像时，这个滑块会滑动，但我也想让它自动开始滑动，当我将鼠标悬停在它上面时，它会停止/暂停滑动，然后当我指向鼠标时它继续滑动......

这是用于在点击时滑动图像的照片

jQuery( document ).ready( function(){
    jQuery( '#flip' ).jcoverflip({
      current: 2,
      beforeCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '40px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
        ];
      },
      afterCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '40px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
        ];
      },
      currentCss: function( el, container ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
        ];
      },

 }); });

如果有人可以帮助我，我将不胜感激......

Answer 1

我认为这样的事情应该有效：

jQuery(function() { //This is the same that document ready. If you already are in document ready function you shouldnt put this line.
  var move = true;
  jQuery("#flip").hover(function() {
    move = false;
  }, function() {
    move = true;
  });

  setTimeout(function() {
    if(move) {
      var eq = $("#flip").find("li").index($("#flip").find("li.current"));
      eq++;
      if ($("#flip").find("li:eq(" + eq + ")").length == 0)
        eq = 0;
      $("#flip").find("li:eq(" + eq + ")").click();
    }
  }, 600);
});

目前的李应该有“当前”类。

上次更新：

您在更改事件中有此代码：

jQuery('#scrollbar').slider('value', ui.to -1);

它不起作用，不知道为什么。在这些行中添加更改事件（在您已经拥有的行之前，因为它会抛出错误）：

jQuery('#flip li.current').removeClass("current");
jQuery('#flip li:eq(' + ui.to + ')').addClass("current");

我还对代码进行了一些更改，以便在结束时开始向后移动。这是：

var move = 1,
    moving = true;
  jQuery("#flip").hover(function() {
    moving = false;
  }, function() {
    moving = true;
  });

  setInterval(function() {
    if(moving) {
      var eq = $("#flip").find("li").index($("#flip").find("li.current"));
      if(move == 1)
        eq++;
      else
        eq--;
      if(eq == -1) {
        eq = eq + 2;
        move = 1;
      }
      if ($("#flip").find("li:eq(" + eq + ")").length == 0) {
        eq = eq - 2;
        move = 0;
      }
      $("#flip").find("li:eq(" + eq + ")").click();
    }
  }, 600);

如何使用jQuery自动滑动

1 个答案: