jQuery 无限缩略图库

Question

我正在寻找一个 jQuery 插件来制作像这个用 Flash 制作的画廊：

http://flash.tutfactory.com/interface/infinite-sliding-gallery/

我曾向 Google 查询“jquery 无限画廊”、“jquery 滚动画廊”等，但找不到类似的东西。它返回的只是当您向下滚动页面时由 Ajax 加载的无限滚动画廊。您知道任何实现此类功能的插件吗？免费或付费对我来说并不重要。有趣的是我发现了这个帖子：https://stackoverflow.com/questions/13874677/looking-for-jquery-infinite-carousel-with-mouseover-activation 有类似的问题，它几天前就关闭了，我希望我的不会。我在 jQuery 中发现的最接近的东西是： http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_horizontal_full_light.html# 但我不知道如何根据鼠标与边缘的接近程度以及如何使其平滑循环来实现各种滚动速度。

感谢您的帮助。

Answer 1

如果你想增加或减少滚动的速度，你可以创建一个透明的 div，它会放在你想让鼠标悬停的地方。然后运行一个函数：

$("div").mouseover(function(){
    //increase here your speed
}).mouseout(function(){
    //decrease here your speed
});

这里有一个如何编写无限轮播画廊的教程： http://www.queness.com/resources/html/carousel/index.html

Answer 2

至于使用鼠标来控制滚动，这里有一些代码从我做的一个有鼠标滚动的网站中提取，但它是针对特定大小的画廊 - 不是无限的。正如 adamb 在评论中所说，您可能必须自己构建它，但这可以作为一些启动代码来检测鼠标位置。基本上，您必须通过在图像滚动出视野时移动图像来创建无限远的错觉。如果他们滚动左侧，则在滚动时将图像向右移动，反之亦然。

            $(function() {
buildThumbs();

function buildThumbs() {
    $('div.portfolio_gallery').each(function() {
        var width = 0;

        var wrapper = $(this).find('.gallery'); 
        wrapper.find('.scroller a').each( function() {
            width += $('.single_img').outerWidth(true);
        });

        var thumbs = $(this).find('.scroller');
        thumbs.css('width', width + 'px');

        makeScrollable(thumbs, wrapper);
    });
}
   function makeScrollable(thumbs, wrapper) {
    var width = wrapper.innerWidth();

    wrapper.scrollLeft(0);

    var leftBuffer = 100;
    var rightBuffer = 100;

    //When user move mouse over menu
    wrapper.unbind('mousemove').bind('mousemove', function(e) {
        var xPos = e.pageX - wrapper.offset().left - leftBuffer;
        var xMax = wrapper.innerWidth() - rightBuffer;
        if(xPos > 0 && xPos < xMax) {
            var perc = xPos / (xMax - leftBuffer);
            var scrollAmt = thumbs.outerWidth(true) - wrapper.innerWidth();
            wrapper.scrollLeft(perc * scrollAmt);
        }
    });
   }
 });