3

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

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

我向谷歌查询了“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_horizo​​ntal_full_light.html# 但我不知道如何根据鼠标与边缘的接近程度以及如何使其平滑循环来实现各种滚动速度。

感谢您的任何帮助。

4

2 回答 2

0

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

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

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

于 2012-12-18T20:23:08.800 回答
0

至于使用鼠标来控制滚动，这里有一些代码是从我做的一个有鼠标滚动的网站中提取的，但它适用于特定大小的画廊 - 不是无限的。正如 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);
        }
    });
   }
 });
于 2012-12-18T20:26:50.950 回答