Question

我正在使用jquery滑块，并且在点击时滚动的方向有问题。点击右箭头然后左键似乎搞砸了，但如果先点击则向左滚动，很奇怪。这是一个错误还是我错过了什么？ PS-我使用Chrome（Mac），但似乎与Firefox和Safari的行为相同

HTML

    <button class="previous"><< Previous</button>
    <button class="next">Next>></button>

    <div class="anyClass">
    <ul>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
        <li><div class="project-thumb caption">
                <div class="cover boxcaption">
                    <div class="content">
                        <h2>The London Police</h2></a>
                        <a class="view-project">View Project</a>
                        </div><!--content END -->   
                            </div><!-- cover boxcaption END -->
                                </div><!-- project-thumb caption END --></li>
    </ul></div><!-- anyClass END -->

    </div><!-- top pannel END -->

</div> <!--panel END -->

CSS

.project-thumb { /* -- This is the hit area -- */
    background: url("images/_scroll4.jpg") no-repeat 0 0;
    overflow: hidden; 
    width:499px;
    height:337px;
    display:block;
    top:0px;
    right:0px;
    position: absolute;
    }    
.project-thumb .boxcaption { /* -- This is the sliding area -- */
    background: #f7c923;
    position: absolute; 
    width:499px;
    opacity: .9; /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
.caption .boxcaption {
    height:100%;
    bottom:0px;
    left: 100%;
    }
.project-thumb .content {
    background: #f7c923;
    width:265px;
    display:block;
    margin:0 auto;
    top:26%;
    position: relative;
    }
.project-thumb h2 {
    font-family: Facebuster;
    text-transform: uppercase;
    color: #333;
    font-size: 60px;
    display:block;
    width:265px;
    line-height: 44px;
    text-align: center;
    }
.project-thumb a.view-project {
    background: url("images/button_viewproject.png") no-repeat 0px 9px;
    display:block;
    font-size: 12px;
    font-family: Gotham;
    text-transform: uppercase;
    color: #333;
    cursor: pointer;
    margin-left: 52px;
    padding-left: 36px; 
    }
.project-thumb a.view-project:hover {
    color: #f35555;
    }

非常感谢罗布

Answer 1

JS出局了

<强> JS

// Sliding Projects Panel
 $(".anyClass").jCarouselLite({
    btnNext: "#panel .next",
    btnPrev: "#panel .previous",
    visible: 9,
    speed:700,
});

可见9，当我在列表中只有8个时。

Jquery滑块走错了方向

1 个答案: