1

我的网站上有一个 jQuery 滑块。我在这个过程中使用了一个教程，但是这个滑块设置为滚动三个项目，但我希望它一次只滚动一个 onClick。除此之外，它工作得很好。

我看到这是因为“.pane” div 包含两组三个项目（这是两个不同的无序列表）。但是，当我更改“.pane”以包装每个单独的项目 (li) 时，它不起作用。

关于解决这个问题的最简单方法有什么想法吗？

<div class="thumbnail_wrapper">
    <div class="left-tab">
        <img class="left" src="images/left-arrow.png" alt="Previous" />
    </div>
    <div class="holder">
        <div class="home_slider">
            <div class="pane"><ul>
                    <li class="post first showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>


                    <li class="post showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>


                    <li class="post showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>

            </ul></div><div class="pane"><ul>
                    <li class="post first showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>


                    <li class="post showDetails">
                    <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>


                    <li class="post showDetails">
                    <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>
            </ul></div>             

            <div class="clear"></div>
        </div>
    </div>  
    <div class="right-tab">
        <img class="right" src="images/right-arrow.png" alt="Next" />
    </div>
</div>
4

1 回答 1

1

将变量中的items属性更改为项目本身，例如在您的演示中：scrollOptions$('.thumbnail_wrapper .pane2')

var scrollOptions = {
    /* skip */
//  items: $panes,
    items: $('.thumbnail_wrapper .pane2'),
    /* skip */
};
于 2011-05-20T02:10:00.870 回答