Question

我想要一个简单的jQuery轮播效果。如果单击左按钮，旋转木马可以完美地工作，但是在循环通过右侧的四个项目后断开。

http://dance.fuelmultimedia.ca

演示

这是我的jQuery代码：

$("div.slider_controls .go_right").click(function(e) {
    e.preventDefault();
    if( $(".home_slider ul li.current").next().size() != 0 ) 
    {
        $(".home_slider ul li.current").animate({ marginLeft: '-=25%'}, 1000).removeClass("current").next().addClass("current");
    }
    else
    {
        var $first = $(".home_slider ul li:first");
        $('.home_slider ul li:last').after($($first));
        $($first).css({'margin-left' : '+25%'});
        $(".home_slider ul li.current").removeClass("current").next().animate({ marginLeft: '-=25%'}, 1000).addClass("current");
    }
});

$("div.slider_controls .go_left").click(function(e) {
    e.preventDefault();
    if( $(".home_slider ul li.current").prev().size() != 0 ) 
    {
        $(".home_slider ul li.current").removeClass("current").prev().animate({ marginLeft: '+=25%'}, 1000).addClass("current");
    }
    else
    {
        var $last = $(".home_slider ul li:last");
        $($last).css({'margin-left' : '-25%'});
        $('.home_slider ul li:first').before($($last));
        $(".home_slider ul li.current").removeClass("current").prev().animate({ marginLeft: '+=25%'}, 1000).addClass("current");
    }

});

这是我的HTML代码

<div class="home_slider">
        <ul>
            <li class="current"><img src="<?php bloginfo('template_url'); ?>/img/home_photo1.jpg"></li>
            <li><img src="<?php bloginfo('template_url'); ?>/img/home_photo2.jpg"></li>
            <li><img src="<?php bloginfo('template_url'); ?>/img/home_photo3.jpg"></li>
            <li><img src="<?php bloginfo('template_url'); ?>/img/home_photo4.jpg"></li>
        </ul>
    </div>

<div class="slider_controls">
            <a href="#" class="go_left">Previous</a>
            <a href="#" class="go_right">Next</a>
        </div>

如果您对问题是什么有任何想法，我将非常感激。

Answer 1

“prev”和“next”按钮的代码块不同 - 当您单击“prev”按钮时，您将删除链中较早的“当前”类。由于这是按预期工作的，尝试镜像您的代码 - 采用'prev'代码，并改变它以相反的方式工作。

简单的jQuery Carousel不工作

1 个答案: