javascript - <script>块上的视差效果

我试图将视差效果应用于脚本块，该脚本块在页面加载的基础上旋转图像。当HTML div的内容为静态<img>时，它可以正常工作。由于Javascript查找$('#parallaxical img').css，由于用<img>替换了静态Randomize()，因此不再使用了<script>，所以我的视差效果不再起作用。我试图改变很多事情而没有成功。

如何让“页眉视差效果”脚本查找新的动态<img>块而不是先前的？

HTML：

<div class="inner" id="parallaxical">
     <script type="text/javascript">Randomize()</script>
</div>

CSS：

#parallaxical {
  width: 100%; height: 300px; overflow: hidden; display: block; position: absolute;
}
#parallaxical img {
  width: 100%; height: auto; min-height: 300px !important; min-width: 1280px !important;
}
#parallaxical h2 {
  margin: -20px 0px 0px; top: 50%; width: 100%; text-align: center; position: absolute;
}
#parallaxical a {
  padding: 0px 20px; color: rgb(221, 221, 221); letter-spacing: 1px; font-size: 24px; background-color: rgba(0, 0, 0, 0.7);
}
#parallaxical a:hover {
  color: rgb(238, 238, 238);
}

Javascript / jQuery：

/*Header parallax effect
======================================================*/
(function($){
  $(document).ready(function(){
    $(window).scroll(function(){
      var window_scroll_position = $(this).scrollTop();
      var parallax_value = window_scroll_position/4;

      $('#parallaxical img').css({
        '-webkit-transform': 'translateY('+ parallax_value +'px)',
        '-moz-transform': 'translateY('+ parallax_value +'px)',
        '-o-transform': 'translateY('+ parallax_value +'px)',
        '-ms-transform': 'translateY('+ parallax_value +'px)',
        'transform': 'translateY('+ parallax_value +'px)'
      });
    });
    $('#parallaxical a').click(function(e){
      var title = $(this).attr('title');
      _gaq.push(['_trackEvent', 'Takeovers', 'Clickthrough to Page', title]);
    });
  });
})(jQuery)

/*Header rotate
======================================================*/
function Randomize() {
    var images = new Array("images/banner/banner1.jpg","images/banner/banner2.jpg","images/banner/banner3.jpg","images/banner/banner4.jpg");
    var imageNum = Math.floor(Math.random() * images.length);
    document.getElementById("parallaxical").style.backgroundImage = "url('" + images[imageNum] + "')";
    document.getElementById("parallaxical").style.backgroundSize = 'cover';
}

window.onload = Randomize;

最佳答案

这将完成工作：

var Randomize = (function() {
    var imageDirectory = 'images/banner/';
    var images = new Array(
        "banner1.jpg",
        "banner2.jpg",
        "banner3.jpg",
        "banner4.jpg"
    );

    return function() {
        //get a random number
        var imageNum = Math.floor(Math.random() * images.length);
        //create the image
        var image = document.createElement('img');
        image.src = imageDirectory + images[imageNum];
        //add it to the containing element
        document.getElementById('parallaxical').appendChild(image);
    }

}());

变化


我将代码包装在一个实例中。
创建了一个imageDirectory变量。看起来更好