Javascript Twitter引导-使用旋转木马图像滚动到#ID

我在一个项目中使用twitter引导旋转木马，必须对其进行自定义，以应用自定义动画，如字幕标记动画。每个项目都应该像字幕文本元素一样滑动

---

我被困在这里，不能前进。我是否必须指定一些滚动时间来延迟项目之间的滚动或其他内容？（我知道我们可以使用interval属性来表示自动循环项目之间的时间延迟，但我无法使用它实现选框效果）

也许这可以帮助您

---

第一步 将此JavaScript添加到您的页面

$(function() {
    function filterPath(string) {
        return string
                .replace(/^\//, '')
                .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
                .replace(/\/$/, '');
    }
    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

    $('a[href*=#]').each(function() {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (locationPath == thisPath
                && (location.hostname == this.hostname || !this.hostname)
                && this.hash.replace(/#/, '')) {
            var $target = $(this.hash), target = this.hash;
            if (target) {
                var targetOffset = $target.offset().top;
                $(this).click(function(event) {
                    event.preventDefault();
                    $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
                        location.hash = target;
                    });
                });
            }
        }
    });

    // use the first element that is "scrollable"
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i < argLength; i++) {
            var el = arguments[i],
                    $scrollElement = $(el);
            if ($scrollElement.scrollTop() > 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop() > 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }
});

$（函数（）{
函数筛选器路径（字符串）{
返回字符串
.替换（/^\/，''）
.replace（/（索引|默认值）。[a-zA-Z]{3,4}$/，“”）
.替换（/\/$/，''）；
}
var locationPath=filterPath（location.pathname）；
var scrolleem=scrollableElement（'html'，'body'）；
$（'a[href*=#]'）。每个（函数（）{
var thisPath=filterPath（this.pathname）| | locationPath；
如果（locationPath==此路径
&&（location.hostname==this.hostname | |！this.hostname）
&&this.hash.replace（/#/，''）{
var$target=$（this.hash），target=this.hash；
如果（目标）{
var targetOffset=$target.offset（）.top；
$（此）。单击（函数（事件）{
event.preventDefault（）；
$（scrollElem）.animate（{scrollTop:targetOffset}，400，function（）{
location.hash=目标；
});
});
}
}
});
//使用第一个“可滚动”的元素
函数可滚动元素（els）{
for（变量i=0，argLength=arguments.length；i0）{
返回el；
}否则{
$scrollElement.scrollTop（1）；
变量isScrollable=$scrollElement.scrollTop（）>0；
$scrollElement.scrollTop（0）；
如果（可循环使用）{
返回el；
}
}
}
返回[]；
}
});

步骤2 在旋转木马中的图像周围添加一个

，并在

href=“#ID”

然后确保页面上有一个具有匹配ID的div（如果没有，则不会执行任何操作）

这对我来说非常好——我知道bootstrap可能会内置类似的东西，但这在100%的情况下都能正常工作

干杯

---

我不记得我从哪里得到了这段代码，但如果有人知道我想赞扬他们，因为这是一段很棒的代码。

你的意思是想让它不断滚动吗？如果是这样的话，那么就没有内置的功能了——你必须自己尝试并定制它。也许最好看看另一个预建的旋转木马，它能满足你的需要。@BillyMoat谢谢你的回复billy。我的意思是，当用户单击上一个/下一个按钮时，旋转木马项目应该在html字幕滚动动画的旁边。