Проблема при создании слайдера изображений с помощью jquery

Question

Проблема при создании слайдера изображений с помощью jquery

0

Я создал слайдер изображения с помощью jquery. Я получаю вывод отлично, но моя проблема в том, что он запускает один цикл, т.е. Если есть 4 изображения, то после последнего изображения он останавливается, я хочу сделать его циклическим, который после последнего слайдера изображения должен отображать первое изображение.

Мой код:

<style type="text/css">
    .active{
        z-index:99;
    }
</style>

<html>
    <head>
    </head>
    <body>
        <div id="slideshow">
            <img src="1.jpg" style="position:absolute;" class="active" />
            <img src="2.jpg" style="position:absolute;" />
            <img src="3.jpg" style="position:absolute;" />
        </div>
    </body>
    <script src="jquery-1.10.1.min.js"></script>
    <script>

    function slideSwitch() {
        var $active = $('div#slideshow IMG.active');
        var $next = $active.next();    

        $next.addClass('active');      

        $active.removeClass('active');      


    }

    $(function() {
        setInterval( "slideSwitch()", 2000 );
        /*if($('#slideshow:last-child').hasClass('active'))
        {
            alert("Complete");
        }*/
    });
</script>
</html>

Что делать, чтобы запустить ползунок в циклическом режиме.

Причина применения этого простого слайдера заключается в том, что я хочу дополнительно настроить слайдер.

Mohemmad K 14 нояб. 2013, в 08:59

Источник

Теги:

javascript

jquery

slider

3 ответа

1

Ну вот:

JS Fiddle: http://jsfiddle.net/3wAxB/

function slideSwitch() {
    var $active = $('div#slideshow IMG.active');
    var $next = $active.next();
    if($next.length==0){
        $next=$('#slideshow img').first();
    }

    $next.addClass('active');      

    $active.removeClass('active');      


}
$(function() {
    setInterval(slideSwitch, 2000 );
});

Также проверьте мой ответ на этот вопрос, он может вам пригодиться: Очень короткое jQuery Image Слайд-шоу

Villarrealized 14 нояб. 2013, в 05:13

1

Попробуй это:

function slideSwitch() {
        var $active = $('div#slideshow IMG.active');
        var $next = $active.next();    
        if($next.length == 0) $next = $('div#slideshow IMG:first');
        $next.addClass('active');
        $active.removeClass('active');      
}

Dmitry Seleznev 14 нояб. 2013, в 05:07

Ещё вопросы

Sujata Chanda · Accepted Answer · 2013-11-14T05-14-00.000Z

Попробуйте этот код: -

          function slideSwitch() {
                var $active = $('div#slideshow img.active'),
                $next;    

                if($('div#slideshow img.active').is(':last-child'))
                {
                    $next = $('div#slideshow img').first();  // get the first image 

                }else{
                    $next = $active.next();    
                }

                $next.addClass('active');      

                $active.removeClass('active'); 
            }