jquery - 寻找特定类型的 jQuery 内容滑块

Question

我正在寻找一种特定类型的内容滑块，但我还没有真正找到我需要的内容。它并不是我似乎很难找到的内容滑块，而是具有特定类型寻呼机的滑块。如下图所示，实际内容所在的位置下方有一个红色条。我正在寻找的是来回滑动而不是仅仅随着内容而变化。我还希望能够用鼠标抓住它并向左或向右滑动，并在我滑动时改变内容。我也希望它在页面加载时自动播放，并在悬停时暂停。任何建议将不胜感激。谢谢！

Answer 1

JCarousel 是一个简单的 JQuery 滑块插件 请检查以下链接 http://sorgalla.com/projects/jcarousel/examples/static_simple.html

Answer 2

使用jQuery UI我创建了：

jsBin 演示

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并改进了红色可拖动滑块：

jsBin 演示 2

Answer 3

让我用一点伪代码：你有一个带有幻灯片 id 的数组......通过抓取栏的总大小并除以数组的长度来找到栏中的关键位置，每个项目的大小将占据可以通过相乘为您提供以像素为单位的位置（锚点）。现在您并排抓取幻灯片的总宽度，一些快速的比例数学可以根据条形位置设置幻灯片包装位置。使用自动滑动选项，只需通过锚位置动画到另一个位置。