我正在寻找一种特定类型的内容滑块,但我还没有真正能够找到我需要的。这并不是真正的内容滑块,似乎很难找到我,而是一个滑块与特定类型的分页程序。正如您将从下图中看到的,在实际内容所在的位置下有一个红色条。我正在寻找的是,这是来回滑动,而不仅仅是随着内容的变化。我也希望能够用鼠标抓取它,向左或向右滑动它,并在我滑动它的同时改变内容。我也希望它能在页面加载时自动播放,并在悬停时暂停。任何建议都将不胜感激。谢谢!
发布于 2012-08-30 19:35:57
使用我创建的jQuery UI:
var $sl = $('#slider');
var slW = $sl.outerWidth(true);
var slN = $sl.children().length;
var c = 0;
var W = slW/slN;
$('#scroller, #nav_btns li').width(W);
function move(){
c = c==-1 ? slN-1 : c%slN;
$sl.stop().animate({scrollLeft: slW*c},1000);
$('#scroller').stop().animate({left: W*c},500);
}
$('#prev, #next').click(function(e){
var btn = this.id==='next'?c++:c--;
move();
});
$('#nav_btns li').click(function(){
c= $(this).index();
move();
});
$("#scroller").draggable({
containment:'parent',
stop: function(){
var stopPos = $(this).position().left;
c = (Math.abs(stopPos/W).toFixed(0));
move();
}
});
EDIT 添加了AUTOSLIDE ,并改进了红色可拖动滑块:
发布于 2012-08-30 18:31:24
JCarousel是一个简易的JQuery幻灯片插件,请查看下面的链接http://sorgalla.com/projects/jcarousel/examples/static_simple.html
发布于 2012-08-30 18:35:48
让我用伪代码说一下:你有一个带有幻灯片ids的数组……条形中的关键位置是通过抓取条形的总大小并除以数组的长度来找到的,具有每个项目将占据的大小可以通过乘法得到以像素为单位的位置(锚点)。现在你可以并排抓取幻灯片的总宽度,一些快速的比例数学可以根据条形位置设置幻灯片包装器的位置。与自动滑动选项,只需动画通过锚点位置到另一个。
https://stackoverflow.com/questions/12203154
复制相似问题