问jQuery无限缩略图库
EN

Stack Overflow用户

提问于 2012-12-18 20:07:50

回答 2查看 1.9K关注 0票数 3

我正在寻找一个jQuery插件，使画廊像这样一个在闪光灯：

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_horizontal_full_light.html#，但我不知道如何根据鼠标离边缘的距离实现不同的滚动速度，以及如何让它平滑循环。

谢谢你的帮助。

thumbnails

carousel

image-gallery

infinite-scroll

jquery

云联络中心6.1折起

灵活稳定的一体化云联络中心，助力快速搭建集电话、在线交流、音视频通话为一体的客户联络平台

回答 2

Stack Overflow用户

发布于 2012-12-18 20:23:09

如果你想增加或降低滚动的速度，你可以创建一个透明的div，它将位于你想要鼠标悬停的地方。然后运行一个函数：

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

这里有一个如何编写无限转盘图库的教程：http://www.queness.com/resources/html/carousel/index.html

票数 0

Stack Overflow用户

发布于 2012-12-18 20:26:51

至于使用鼠标来控制滚动，这里有一些代码来自我做的一个网站，它有鼠标滚动，但它是针对特定大小的画廊-而不是无限的。正如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);
        }
    });
   }
 });