javascript - 如何创建推荐 slider

Question

我必须创建一个用于推荐的 slider 插件以在网页中显示，推荐项目应该一次可见，我已经在 HTML 中创建了基本 block 和 jquery.I 使用 setTimeOut 函数在 each 函数中隐藏和显示推荐项目，但它不能正常工作。我在这里粘贴我的代码

** HTML**

<div class="col-md-6 testimonial-wrapper">

                    <div class="testimonial-item" style="display: block; opacity: 0.872447;">
                        <h3>
                            Testimonials</h3>
                        <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;
                            margin-left: 0;">
                        <h4>
                          Shaf/ Seo</h4>
                        <blockquote>
                            <p>Hi                      
                            </p>
                        </blockquote>
                     </div>

                    <div class="testimonial-item" style="display: block; opacity: 1;">
                        <h3>
                            Testimonials</h3>
                        <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;
                            margin-left: 0;">
                        <h4>
                          Shaje/ As</h4>
                        <blockquote>
                            <p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text                       
                            </p>
                        </blockquote>
                     </div>

           </div>

JQUERY

$(document).ready(function () {

    var wrapper = $(".testimonial-wrapper");
    var testimonialItem = $(".testimonial-wrapper .testimonial-item");
    var timeOut = 10000;
    var lengthOfItem = testimonialItem.length;
    var counter = 0;

    startIteration();



    function startIteration() {
        testimonialItem.each(function () {
            var current = $(this);
            setInterval(startTestimonialSlider(current), timeOut);
            counter++;
            debugger;
            if (counter == lengthOfItem) {
                counter = 0;
                debugger;
                startIteration();
            }

        });

    }

    function startTestimonialSlider(itemToDisplay) {
        itemToDisplay.prev().fadeOut();
        itemToDisplay.fadeIn();
    }

});

这不能正常工作。

请看乱码here

Answer 1

我想这就是你想做的吧？

$(document).ready(function () {

var testimonialItem = $(".testimonial-wrapper .testimonial-item");
var lengthOfItem = testimonialItem.length;
var counter = 0;
    
testimonialItem.hide();
setTimeout(function(){
startIteration(counter);
}, 1000);


function startIteration(counter) {
testimonialItem.eq(counter).fadeIn('slow', function() {
if(counter<=lengthOfItem){ 
setTimeout(function(){ 
testimonialItem.fadeOut('slow',function(){
if (counter == lengthOfItem) {
counter = 0;  
}else{
counter++;}
setTimeout(function(){ startIteration(counter);}, 500);    
});}, 2000);
}
});
}

    


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 testimonial-wrapper">
    <div class="testimonial-item" style="display: block; opacity: 0.872447;">
         <h3>Testimonials</h3>

        <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;margin-left: 0;">
         <h4>Shaf/ Seo</h4>

        <blockquote>
            <p>Hi</p>
        </blockquote>
 </div>
    <div class="testimonial-item" style="display: block; opacity: 1;">
         <h3>
                                Testimonials</h3>

        <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;
                                margin-left: 0;">
         <h4>
                              Shaje/ As</h4>

        <blockquote>
            <p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text</p>
        </blockquote>
    </div>
</div>