Question

好。所以我有一个我用WordPress编写的小jQuery图库滚动条。它在Firefox中运行得很漂亮，但在Chrome或Safari中无效。

这是链接：

http://thehousinggroup.info/our-gallery/bathroom-renovations/gallery-1/

这是jQuery：

    var imageQuantity = $('.galleryBox img').size() //finds the number of images
    var wrapWidth = imageQuantity * 610 + 'px' //sets inner wrapper to image width*no. of images

    //Formating
    $('.galleryBox img')
        .hide()
        .unwrap()
        .wrapAll('<ul></ul>')
        .wrapAll('<div id="innerWrap"></div>')
        .wrap('<li></li>');//wraps images in ul and div, strips off the <p> that WordPress adds
    $('#innerWrap').css({
        'width' : wrapWidth,
        'position' : 'relative'
    });
    $('.galleryBox').css({'overflow' : 'hidden'}); //this css will be relegated to the stylesheet eventually...
    $('.galleryBox ul').css({'list-style' : 'none'});
    $('.galleryBox li').css({
        'float' : 'left',
        'margin-right' : '10px'
    });
    $('.galleryBox img').show(); //shows the images once the formatting is complete

    //Scroll Controls

    var currentNumber = 1; //this is for the "1 of 4" counter
    var fullNumber = imageQuantity;

    $('#innerWrap').before('<p id="scroller"><a id="prevButton" href="">previous</a> <span id="currentNumber">' + currentNumber + '</span> of ' + fullNumber +' <a id="nextButton" href="#">next</a></p>'); //this places the next, previous, and 1 of # counter buttons 
    $('#nextButton').click(function(event){
        event.preventDefault();
        var wrapPosition = parseInt($('#innerWrap').css('right'));
        var stopPoint = (fullNumber-1)*610;
        if(wrapPosition < stopPoint) { //sets the scrolling to stop at last image
            $('#innerWrap').animate({'right' : "+=610px"});
            ++currentNumber;
            $('#currentNumber').empty().html(currentNumber); //sets the counter to the proper number
        }
    });
    $('#prevButton').click(function(event){ //same as above, reversed out for the previous button
        event.preventDefault();
        var wrapPosition = parseInt($('#innerWrap').css('right'));
        var stopPoint = (fullNumber-1)*610;
        if(wrapPosition > 0) {
            $('#innerWrap').animate({'right' : "-=610px"});
            --currentNumber;
            $('#currentNumber').empty().html(currentNumber);
        }

    });

我将把css设置在样式表中，但这就是它现在的设置方式。如果你有任何进一步的批评，我是开放的！

感谢。

Answer 1

此代码在Chrome中突破：var wrapPosition = parseInt($('#innerWrap').css('right'));

所以它正在跳过这个块：

        if(wrapPosition < stopPoint) {
            $('#innerWrap').animate({'right' : "+=610px"});
            ++currentNumber;
            $('#currentNumber').empty().html(currentNumber);
        }

Answer 2

这条线引起了我的注意：

$('#innerWrap').animate({'right' : "-=610px"});

特别是因为最初在WebKit上没有设置“right”属性。

尝试将计算完成一步：

right_pos = doTheMathHere;
$('#innerWrap').animate({'right' : rigt_pos});

Answer 3

很抱歉回答我自己的问题

我想我明白了。它与wrapAll（）顺序有关。我打算将<ul>包裹在<div>内，但相反的情况正在发生。这不是Webkit的问题。它更像是其中之一......“等等......为什么这会在Firefox中发挥作用”。

jQuery Gallery - Webkit问题

3 个答案: