Динамически изменить и показать изображение в div с атрибутом - PullRequest
Новая
       7

Динамически изменить и показать изображение в div с атрибутом

0 голосов
/ 06 ноября 2018

У меня есть div из шаблона: 

<div class="parallax-container" data-parallax-img="img/index_photos/2.jpg">
//some content
</div>

и я попытался изменить атрибут div с помощью jQuery следующим образом: 

<script type="text/javascript">
    var bgImg = 1;
    window.setInterval(function(){
        yourFunction();
    }, 10000);
    function   yourFunction () {
        ++bgImg;
        if(bgImg === 4){
            bgImg = 1;
        }

        if(bgImg === 1){
            $('.parallax-container').attr('data-parallax-img', "img/index_photos/2.jpg");
        }

        if(bgImg === 2){
            $('.parallax-container').attr('data-parallax-img', "img/index_photos/3.jpg");
        }

        if(bgImg === 3){
            $('.parallax-container').attr('data-parallax-img', "img/index_photos/4.jpg");
        }
    }
</script>

Так что теперь в моем браузере, когда я нажимаю «проверить элемент», я вижу, что атрибут этого div меняется каждые несколько секунд, но изображение вообще не отображается.

1 Ответ

0 голосов
/ 06 ноября 2018

Если вы хотите изменить источник изображения с помощью jQuery, вам следует изменить атрибут src , например, 

<script type="text/javascript">
  var bgImg = 1;
  window.setInterval(function(){
    yourFunction();
  }, 10000);
  function   yourFunction () {
    ++bgImg;
    if(bgImg === 4){
        bgImg = 1;
    }

    if(bgImg === 1){
        $('.parallax-container').attr('src', "img/index_photos/2.jpg");
    }  ...

}
</script>

Дополнительную информацию можно найти в этом тесно связанном вопросе: Jquery изменить изображение при нажатии

...