Jquery - 推荐淡入/淡出分页答案

【问题标题】：Jquery - Testimonial fadeIn/out paginationJquery - 推荐淡入/淡出分页
【发布时间】：2015-08-30 14:08:46
【问题描述】：

我得到了滚动列表的分页，但现在我被困在点击相应页面时让页面滚动。

我想这样做，如果我点击第 2 页，它应该向我显示第二个 div，依此类推..

jquery：

$(document).ready(function(){
    $("#page1").css("background", "#ccc");
    setInterval(function(){     
        $('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
            if($(this).next('.slide').size()){
                $(this).next().fadeIn(1000);                
            }
            else{
                $('#testimonials .slide').eq(0).fadeIn(1000);
            }
            for(var i=1;i<$('.slide').length+1;i++){            
                if($('#testimonial'+i).is(":visible")){
                    $("#page"+i).css("background", "#ccc");
                }else{
                    $("#page"+i).css("background", "transparent");
                }               
            }
        });     
    },1000);  
});

HTML：

<div id="testimonials">
    <div class="slide">
        <div class="aboutus_given_feedback" id="testimonial1">
            <div class="aboutus_bubble">
                1
            </div>      
        </div>  
    </div>

    <div class="slide" style="display:none">
        <div class="aboutus_given_feedback" id="testimonial2">
            <div class="aboutus_bubble">
                2
            </div>      
        </div>  
    </div>

    <div class="slide" style="display:none">
        <div class="aboutus_given_feedback" id="testimonial3">
            <div class="aboutus_bubble">
                3
            </div>      
        </div>
    </div>

    <div id="testimonial_page">
        <span id="page1" class="pagination"></span>
        <span id="page2" class="pagination"></span>
        <span id="page3" class="pagination"></span>
    </div>
</div>

【问题讨论】：

标签： jquery html css pagination

【解决方案1】：

$(".pagination").click(function(){        
    $("#testimonials .slide").hide();
    $("#testimonials .slide").eq($(this).prevAll("span").length).fadeIn(500);
    $(".pagination").css("background", "transparent");
    $(this).css("background", "#ccc");
});

要使其正常工作，请将您的 Interval 增加到 5 秒。我已经更新了你的小提琴。

【讨论】：