寻找特定类型的 jQuery 内容滑块 [关闭]

Posted 2023-05-09

【中文标题】寻找特定类型的 jQuery 内容滑块 [关闭]

【英文标题】：Looking for Specific Type of jQuery Content Slider [closed]

【发布时间】：2012-08-25 13:14:53

【问题描述】：

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

【问题讨论】：

这个问题与编程无关。 ***.com/faq#questions

我会说它与编程有关。我正在寻找一种在内容滑块底部实现滑动寻呼机的特定方法。有人知道如何实现这一点，可以将我指向一个已经构建的插件，或者向我解释如何通过手动编码来实现我所追求的目标。放松互联网警察，我只是想实现一个特定的功能，并认为这里有大量可用信息，有人可以让我朝着正确的方向前进。

【参考方案1】：

使用 jQuery UI 我创建了：

jsBin demo

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 demo 2

【讨论】：

除了 CSS 部分中的 base64 编码内容之外，这真是太棒了。这基本上就是我正在寻找的东西。非常感谢！ base64 到底是干什么用的？！

有没有办法让它自动播放？

@alibaster 我删除了base64encode，如果你问我最好只使用图像:) 我很快就会发布一个自动幻灯片版本！

@aliaster btw 看看我在之前的演示中使用的渐变colorzilla.com/gradient-editor

@alibaster jsbin.com/atesuq/10/edit 悬停时自动滑动

【参考方案2】：

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

【讨论】：

嗨，谢谢。不完全是我要找的。它不一定需要是一个简单的插件。寻找我要找的东西的最大障碍是我们在它下面需要的滑动寻呼机。我更喜欢使用 jQuery Cycle，但我没有看到使用滑动寻呼机来控制内容滑块的选项。

这是一个底部有寻呼机的slidesjs.com/examples/images-with-captions

【参考方案3】：

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