Question

我的模板有一个div：

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

我试图用jQuery来改变div属性，像这样：

<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的属性每隔几秒钟变化一次，但是图像根本没有显示。

Answer 1

如果您希望通过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 change image on click

动态更改并在具有属性

1 个答案: