2

http://cambridgeuplighting.com/portfolio

我正在尝试创建一个函数，当幻灯片到达任一端时，该函数将淡出 scrollTo 函数的 Next 和 Prev 控件。我有一个好的开始，但它并没有按照我想要的方式工作。我需要控件在点击结束之前淡出点击。现在它到达末尾，然后下一次单击（不会滚动，因为它在末尾）将使控件淡出。

这是我的代码，提前非常感谢！

jQuery（请参阅上面的 HTML 和 CSS 网站链接）

 jQuery(function( $ ){
    var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    //set the width of the container depending on how many post items are there
    $('#postContainer').css({'width': containerWidth })
    //find the relative position of the end point by getting the negative value of the container width minus 961 (extra pixel is to account for IE difference)
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        $('.newerEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('.olderEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('+=960', 700 );
        }   
    });

    $('.newerEvents').click(function () {
        $('.olderEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
            //relative position of 0 means the slideshow is at the other end
        if (slidePos.left==0) {
            $('.newerEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('-=960', 700 );
        }
    });
});
4

2 回答 2

1

我认为所需的功能对用户来说是不直观的。而不是禁用用户已经在使用的控件；迫使他们识别并开始使用另一个控件，我认为将这个控件重新映射到对用户来说直观的功能会更有用。

在这种情况下，这将允许用户使用此控件以相反的顺序浏览列表。尝试为用户提供最有用的工具来浏览您的内容。

这样想：使用/查看/整理一堆书的更好方法是什么？将它们排成一排并要求用户来回移动该行，或者将书籍排列在一个lazy-susan上并允许用户旋转它？

这里的比喻更多是关于允许用户将内容视为一条完整的链，而不是带有末端的字符串，而不是关于视觉上表示一个圆圈或一行。

此方法的一个适当示例如下所示： http ://www.ndoherty.biz/demos/coda-slider/2.0/

于 2010-02-15T18:05:27.450 回答
0

@ greg-J：我同意你关于禁用控件效果的评论。这是我的代码，一旦您到达列表的末尾，它就会滚动回第一个元素。查看示例@http ://cambridgeuplighting.com/portfolio

jQuery(function( $ ){
        var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    $('#postContainer').css({'width': containerWidth })
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('#slideScreen').scrollTo('-='+containerWidth, 1000 );
        } else {
            $('#slideScreen').scrollTo('+=480', 500 );
        }   
    });

    $('.newerEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left==0) {
            $('#slideScreen').scrollTo('+='+containerWidth, 1000);
        } else {
            $('#slideScreen').scrollTo('-=480', 500 );
        }
    });
});
于 2010-02-17T15:27:55.120 回答