滚动到列表项并停止当李在中心

嘿家伙我想在这里做一个旋转木马。其实我用列表项和内部的图像。现在我正在使用滚动来滚动到一个特定的列表项目。但重点是，当我点击一个拇指说2号码滚动到李内的图像，并设置图像marign-left：0px; 我想要做的是滚动到居中图像。（图像应该滚动直到居中）。滚动到列表项并停止当李在中心

点击第4个大拇指看效果。

我在做一个小提琴。 MyFiddle

jQuery(document).ready(function($) { 
     $("#fourthThumb").click(function() { 

      $('html, body').animate({ 
       scrollLeft: $("#fourthImage").offset().left 
      }, 2000); 
     }); 
    });

如何使滚动第四图像居中何时停止。 谢谢。

来源

2014-01-20 Marc Andre Jiacarrini

这是更好地使动态的，其适用于每一个图片：LIVE DEMO

jQuery(document).ready(function($) { 
    $("#thumbsList li").click(function() {     
     var windowWidth = jQuery(window).width()/2; 
     var index = $(this).index(); 
     var thisImg = $("#imagesList li img:eq("+index+")"); 
     var imagewidth = thisImg.width()/2; 
     $('html, body').animate({      
      scrollLeft: ((thisImg.offset().left)-windowWidth+imagewidth) 
     }, 1000); 
    }); 
});

来源

2014-01-20 11:02:50

@Simak那真是太棒了！你能告诉我一件事，我如何使它响应？我的意思是我应该如何根据容器设置ul的高度和imgs以适合容器？不管怎么说，多谢拉 –

将这种工作在你的情况？

jQuery(document).ready(function($) { 
     $("#fourthThumb").click(function() {     
      var windowWidth = jQuery(window).width()/2; 
      var imagewidth = $("#fourthImage").width()/2; 
      $('html, body').animate({      
       scrollLeft: (($("#fourthImage").offset().left)-windowWidth+imagewidth) 
      }, 2000); 
     }); 
    });

http://jsfiddle.net/aKEJ7/1/

来源

2014-01-20 10:53:30 timo

嘿，这是很酷的，怎么样，如果我按下两个或一个它滚动到一个中心。 –

可以重做小提琴吗？ –

有滚动而不是滚动滚动到一个特定的图像 –

滚动到列表项并停止当李在中心

回答

相关问题