我正在寻找一个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#,但我不知道如何根据鼠标离边缘的距离实现不同的滚动速度,以及如何让它平滑循环。
谢谢你的帮助。
发布于 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
发布于 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);
}
});
}
});
https://stackoverflow.com/questions/13940670
复制