jQuery水平滚动（点击和动画） [英] jQuery Horizontal Scrolling (click and animate)

问题描述

我有一系列div在水平线上浮动到无穷大。我有一个固定宽度的div容器，他们，overflow：hidden。最后，我想按左右的div /按钮滚动项目（与使用滚动条）。

I have a series of divs floating to infinity in a horizontal line. I have a fixed width div container them, overflow:hidden. Ultimately, I'd like to press divs/buttons on left and right to scroll through the items (vs. using scrollbar).

我无法获取.animate ） 上班。我想让每次点击移动列表中的项目。

I am having trouble getting .animate() to work. I want each click to move the items within the list over.

它应该类似于Amazons客户谁买了这个项目也买了列表，你可以滚动浏览相同的方式。我试着使用.mousedown，并握着它移动（类似于真正的滚动），但希望首先这样做更容易的方法。

It should work similar to Amazons "Customers Who Bought This Item Also Bought" list that you can scroll through in the same manner. I was tempted to try using .mousedown and have it move while holding (similar to true scrolling) but want do this easier approach first.

这里是小提琴和代码：

Here is the fiddle and code:

http://jsfiddle.net/stfzy/16/

HTML：

<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
    <div class='list'>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class="item">
        </div>
    </div>
</div>

CSS：

 #container{
width:340px;
    height:50px;
}

#list-container {
overflow:hidden;    
width: 300px;  
float:left;    
}

.list{
    background:grey;
min-width:700px;
    float:left;
}


#arrowR{
background:yellow;
    width:20px;
    height:50px;
    float:right;
    cursor:pointer;
}


#arrowL{
background:yellow;
    width:20px;
    height:50px;
    float:left;
    cursor:pointer;
}

.item{
    background:green;
width:140px;
    height:40px;
    margin:5px;
    float:left;
}

jQuery

$(document).ready(function() {

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'-=300px'});

    });

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'+=300px'});

    });

});

任何和所有的帮助赞赏。感谢！

Any and all help appreciated. Thanks!

推荐答案

添加 position：relative 到 .item ，如下所示：

.item{
    background:green;
    width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative; /* Put me here! */
}

工作示例： http://jsfiddle.net/mattblancarte/stfzy/21/

还有几个错误你的设置，但这应该让你不稳定。 ：）

There are a few more bugs in your setup, but this should get you unstuck. :)

:

这是一个快速解决方案，

Here is a quick solution to solve the bug where the list will slide too far in either direction:

$(document).ready(function() {

    var $item = $('div.item'), //Cache your DOM selector
        visible = 2, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...)

    $('div#arrowR').click(function(){
        if(index < endIndex ){
          index++;
          $item.animate({'left':'-=300px'});
        }
    });

    $('div#arrowL').click(function(){
        if(index > 0){
          index--;            
          $item.animate({'left':'+=300px'});
        }
    });

});

这篇关于jQuery水平滚动（点击和动画）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！