Question

我必须创建一个滑块插件以供推荐以在网页中显示，推荐项应该是一次显示，我已经在HTML中创建了基本块和jquery.I使用setTimeOut函数来隐藏和显示每个函数内的推荐项，但它无法正常工作。我在这里粘贴我的代码

** 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

我认为这是你想做的事情吗？

＆＃13;

$(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);
}
});
}

    


});

＆＃13;

<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>

＆＃13;

如何创建推荐滑块

1 个答案: