Простая смена изображения на jQuery

Question

Необходимо сделать простую прокрутку изображений по интервалу на сайте.

function imgRotator(el){
        var transTime = 1500;
        var imgs = $(el).find('.img');
        
        setInterval(function(){
            if($(imgs).find('.active').index()+1 == (imgs.length)){
                $(imgs).find('.active').removeClass('active');
                $(imgs).eq(0).addClass('active');
            }else{
                var curIndex = $(imgs).find('.active').index();
                $(imgs).find('.active').removeClass('active');
                $(imgs).eq(curIndex+1).addClass('active');
            }
        },transTime);
    }

    $(function(){
        $('.img_viewport').each(function (i, value) {
            imgRotator(this);
            
        });
    });

.img_viewport .img{
  display: none;
}
.img_viewport .img.active{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="img_viewport">
  <div class="img">img 1</div>
  <div class="img">img 2</div>
  <div class="img">img 3</div>
  <div class="img active">img 4</div>
  <div class="img">img 5</div>
</div>
<div class="img_viewport">
  <div class="img active">img 1</div>
  <div class="img">img 2</div>
  <div class="img">img 3</div>
  <div class="img">img 4</div>
  <div class="img">img 5</div>
</div>

Answer 1

Решено добавлением parent

function imgRotator(el){
        var transTime = 1500;
        var imgs = $(el).find('.img');
        
        setInterval(function(){
        if($(imgs).parent().find('.active').index()+1 == (imgs.length)){
            $(imgs).parent().find('.active').removeClass('active');
            $(imgs).eq(0).addClass('active');
        }else{
            var curIndex = $(imgs).parent().find('.active').index();
            $(imgs).parent().find('.active').removeClass('active');
            $(imgs).eq(curIndex+1).addClass('active');
        }
    },transTime);
    }

    $(function(){
        $('.img_viewport').each(function (i, value) {
            imgRotator(this);
            
        });
    });

.img_viewport .img{
  display: none;
}
.img_viewport .img.active{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="img_viewport">
  <div class="img">img 1</div>
  <div class="img">img 2</div>
  <div class="img">img 3</div>
  <div class="img active">img 4</div>
  <div class="img">img 5</div>
</div>
<div class="img_viewport">
  <div class="img active">img 1</div>
  <div class="img">img 2</div>
  <div class="img">img 3</div>
  <div class="img">img 4</div>
  <div class="img">img 5</div>
</div>

БЛОГ НА HUSL

Простая смена изображения на jQuery

Ответы (1 шт):