CSS位置箭头元素 - Jquery循环答案

【问题标题】：CSS position arrow elements - Jquery cycleCSS位置箭头元素 - Jquery循环
【发布时间】：2013-11-29 10:02:16
【问题描述】：

我正在尝试在以下代码中定位两个箭头元素。它们应该在引号的直接左右，我希望将它们挂接到 jQuery 循环中以向左或向右移动。

$(document).ready(function () {

$('#txtRotate').cycle({
    fx: 'scrollRight',
    timeout: 3,
    cleartypeNoBg: true
});

});

【问题讨论】：

标签： jquery css positioning

【解决方案1】：

Cycle 插件使用prev 和`next 内置了此功能

$(document).ready(function () {
    $('#txtRotate').cycle({
        fx: 'scrollRight',
        timeout: 0,
        next: '#right',
        prev: '#left'
    });
});

Example jsFiddle

但是，根据您使用的效果 (scrollRight)，很难区分两个箭头之间的区别（实际上不可能只有两个元素）。您可能想改用scrollHorz 效果

你真的应该看看plugin page，它有很多有用的例子（包括一个带有上一个和下一个按钮的例子）。它也可能对您发布的最后一个问题有所帮助

编辑

通常，如果您希望箭头相对于您将其作为子元素放置的元素定位。但是，由于循环元素不允许这样做，因此您必须使用 jQuery，如下所示。它在窗口调整大小时触发，因此它可以始终与异常定位的循环元素保持一致

$(window).resize(function() {
    var midWay = $('#txtRotate').offset().top + $('#txtRotate').height() / 2;
    console.log(midWay);
    $('#left').css('top', midWay);
    $('#right').css('top', midWay);
}).resize();

Updated demo

【讨论】：

我想我的问题更多的是如何让箭头出现在引号 div 的左/右，以便它们都水平对齐。
@user1110562 已更新以满足您的需求
@user1110562 还有其他反馈吗？