Question

这可能有点过于具体，但我有一个jquery滑块，我使用<p>类而不是图像来循环显示客户引号。基本上我现在遇到的问题是当它是静态的和不动的时候（JS代码被标记出来）它们是我想要它们的对齐方式。一旦JS没有被注释，它们就会伸出视野，你只看到一个白色的盒子？

有什么想法吗？

我希望每个面板看起来像： quotes aligned http://i61.tinypic.com/295dcgy.png

jsfiddle

Answer 1

它花了我一点点，但我想我想出了一些事情。

http://jsfiddle.net/qLca2fz4/28/

首先，你的控制台抛出了一些错误：首先，没有定义旋转，并且箭头gif不存在。箭头gif可能是你在本地存储的东西，但我通过将代码中的字符串更改为实际变量来更改“旋转”错误。

所以，来自：

 run = setInterval('rotate()', speed);

我们得到：

 run = setInterval(rotate, speed);

（No（）基于此处的示例：http://www.w3schools.com/jsref/met_win_setinterval.asp）

但我认为一个更重要的问题是为什么你的文字根本没有显示出来。这是因为这里的逻辑：

$('#slides ul').css({'left' : left_value});

您甚至说这是设置代码的默认位置。但它不是......“left_vaule”是你计算在幻灯片中向左推的数量。因此，如果您检查元素，您可以看到整个UL基本上是如何移动一张幻灯片的价值太远，无法看到。所以我们摆脱'left_value'，并用0替换它。

$('#slides ul').css({'left' : 0});

现在，没有什么能真正处理图片如何滑入，因此该部分仍然很粗糙，但这应该足以开始了。

如果我误解了任何内容，或者您有任何问题，请告诉我。

Answer 2

所以，有一些事情：

1）我相信你试图让所有的li并排，而不是上下安排。有几种方法可以做到这一点。我只是让ul的宽度为300％，然后让li每个占据三分之一：

#slides ul {
    ....
    width: 300%;
}

#slides li {
    width: calc(100% / 3);
    height:250px;    
    float:left;
}

2）你说得对，但是JSFiddle自动将你所有的JS包装在$(document).ready()处理程序中，你的函数rotate需要在普通的DOM中。只需将JSFiddle设置从'onload'更改为'no wrap - in head'

3）抓取元素的CSS值并不总是有效，特别是当你处理动画元素时。您已经知道li变量的item_width元素的宽度。我只是使用它并更改你的代码：

var left_indent = parseInt($('#slides ul').css('left')) - item_width;

$('#slides ul').animate({'left' : left_indent}, 1500, function () {

为：

$('#slides ul').stop().animate({'left' : -item_width * 2}, 1500, function () {

4）投掷.stop()，如上图所示。这可以防止您的动画重叠。如果return false正在设置动画，那么另一个也许更简洁的方法就是在{next}和'prev'函数的开头简单#slides ul，如下所示：

 if ($('#slides ul').is(':animated')) return false;

我认为这就是一切。这是JSFiddle。干杯！

编辑：

哦，您可能还希望在clearInterval和next函数的开头prev，然后在动画回调函数中重置它：

$('#prev').click(function() {
    if ($('#slides ul').is(':animated')) return false;
    clearInterval(run);

    $('#slides ul').stop().animate({'left' : 0}, 1500,function(){
        ....
        run = setInterval('rotate()', speed);
    });
});

Answer 3

所以我把它作为我的星期五项目。我已经更改了很多代码，并为引号和作者添加了垂直对齐。

这里是小提琴http://jsfiddle.net/qLca2fz4/49/

我在脚本的顶部添加了很多变量，因此您可以减少整个输入。

$(document).ready(function () {
    //rotation speed and timer
    var speed = 5000;

    var run = setInterval(rotate, speed);
    var slides = $('.slide');
    var container = $('#slides ul');
    var elm = container.find(':first-child').prop("tagName");
    var item_width = container.width();
    var previous = 'prev'; //id of previous button
    var next = 'next'; //id of next button

由于您使用了基于％的宽度，因此我需要设置元素的像素宽度，以防屏幕被重新调整

    slides.width(item_width); //set the slides to the correct pixel width
    container.parent().width(item_width);
    container.width(slides.length * item_width); //set the slides container to the correct total width

正如您所做的那样，如果按下后退按钮，我会重新排列幻灯片

    container.find(elm + ':first').before(container.find(elm + ':last'));
    resetSlides();

我将prev和next click事件合并为一个函数。它检查click事件中目标元素的ID，然后运行正确的上一个或下一个函数。如果您在点击事件后重置setInterval，则浏览器在悬停时无法停止它。

    //if user clicked on prev button

    $('#buttons a').click(function (e) {
        //slide the item

        if (container.is(':animated')) {
            return false;
        }
        if (e.target.id == previous) {
            container.stop().animate({
                'left': 0
            }, 1500, function () {
                container.find(elm + ':first').before(container.find(elm + ':last'));
                resetSlides();
            });
        }

        if (e.target.id == next) {
            container.stop().animate({
                'left': item_width * -2
            }, 1500, function () {
                container.find(elm + ':last').after(container.find(elm + ':first'));
                resetSlides();
            });
        }

        //cancel the link behavior            
        return false;

    });

我发现mouseenter和mouseleave比悬停更可靠。

    //if mouse hover, pause the auto rotation, otherwise rotate it    
    container.parent().mouseenter(function () {
        clearInterval(run);
    }).mouseleave(function () {
        run = setInterval(rotate, speed);
    });

我打破了它自己的功能，因为它在许多不同的地方被调用。

    function resetSlides() {
        //and adjust the container so current is in the frame
        container.css({
            'left': -1 * item_width
        });
    }

});
//a simple function to click next link
//a timer will call this function, and the rotation will begin :)

这是你的轮换计时器。

function rotate() {
    $('#next').click();
}

使用jquery滑块来显示文本而不是图像？

3 个答案: