对文本而不是图像使用jQuery滑块？ [英] Using a jquery slider for text instead of images?

问题描述

这可能有点太具体，但我有一个jquery滑块，我使用< p> 类而不是图像循环通过客户报价。基本上，我现在遇到的问题是，当它是静态和非移动（JS代码被委任），他们是对齐我想要他们是。

This may be a little too specific, but I have a jquery slider that I am using <p> classes instead of images to cycle through customer quotes. Basically the problem I am running into right now is when it is static and non moving (JS code is commeneted out) they are aligned how I want them to be. As soon as the JS is un commented, they stretch out of view and you just see a white box?

任何想法？

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

How I want each panel to look like: quotes aligned http://i61.tinypic.com/295dcgy.png

jsfiddle

jsfiddle

推荐答案

所以我这样做是我的星期五项目。我改变了很多你的代码，并添加了一个vertical-align到引号和作者。

So I sort of made this my Friday project. I've changed a whole lot of your code, and added a vertical-align to the quotes and authors.

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

Here's the fiddle http://jsfiddle.net/qLca2fz4/49/

我在脚本的顶部添加了大量变量，因此可以减少打字时间。

I added a whole lot of variables to the top of the script so you could less typing throughout.

$(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

由于您使用的是基于％的宽度，因此在设置屏幕调整时可以设置元素的像素宽度。

Since you used a % based width I'm setting the pixel widths of the elements in case the screen is reszed

    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

像你一样，我重新排列幻灯片

As you had, I'm rearranging the slides in the event the back button is pressed

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

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

I combined the prev and next click events into a single function. It checks for the ID of the element targeted in the click event, then runs the proper previous or next functions. If you reset the setInterval after the click event your browser has trouble stopping it on hover.

    //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比hover更可靠。

I've found mouseenter and mouseleave to be a little more reliable than hover.

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

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

I broke this in to its own function because it gets called in a number of different places.

    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滑块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！