1

我正在使用一个简单的 jQuery 来旋转（和随机化）一系列图像。我想知道调整它以旋转通过类定义的背景图像会有多困难。

脚本如下所示：

<script type="text/javascript">
        jQuery.jQueryRandom = 0;
        jQuery.extend(jQuery.expr[":"],
        {
            random: function(a, i, m, r) {
                if (i == 0) {
                    jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
                };
                return i == jQuery.jQueryRandom;
            }
        });        

        $(function() {
          $('#slideshow img').not(':random').hide(); //hide all images except one initially
          setInterval(function(){
            $('#slideshow img:visible').fadeOut('slow')
              .siblings('img:random').fadeIn('slow') //find a random image
               .end().appendTo('#slideshow');}, 
            9000); //2 second interval
        });
</script>

HTML是：

<div id="slideshow">
  <img src="banner1.jpg" />
  <img src="banner2.jpg" />
  <img src="banner3.jpg" />
  <img src="banner4.jpg" />
  <img src="banner5.jpg" />
</div>

CSS

<style type="text/css">
#slideshow {
    width: 100%;
    position: relative;
    }

#slideshow img {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    position: absolute;
    }
</style>

所以，我想做，但不知道是让图像旋转作为应用于类的背景。因此，不是在 html 中定义所有图像，而是通过这样的类旋转：

.slideshow {

  background: url(banner1.jpg) no-repeat bottom center;

}

这是否可以通过对上面的脚本进行一些调整来实现？这种方法有什么陷阱吗？

谢谢！

4

2 回答 2

3

使用 URL 数组而不是引用元素，并使用 jQuery 的.css. 它看起来像这样

var imgArray = ['banner1.jpg', 
                'banner2.jpg', 
                'banner3.jpg', 
                'banner4.jpg', 
                'banner5.jpg'
               ]
var nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ") no-repeat bottom center";
$('#slideshow').css("background", nextBG);              

setInterval(function(){
    nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ") no-repeat bottom center";
    $('#slideshow').fadeOut('slow', function() { 
        $(this).css("background", nextBG).fadeIn('slow'); })                   
}, 3000); // 3 second interval

工作的jsFiddle

如果您想拥有多个幻灯片，它会是相同的，但您可以将 ID 更改为一个类，然后使用 aforEach或者您可以.slideshow:eq(0)为它们中的每一个做。您还必须第二次生成随机图像。如果您正在寻找这个，请告诉我

然而，要做到这一点，它比看起来更复杂，最好事先加载图像。您可以像这篇文章所说的那样将它们加载到隐藏元素中，也可以像其他文章所说的那样使用 jQuery 预加载它们

编辑：在第一次发布时，我不小心$('#slideshow img')从我改变的原件中得到了。之前的突然出现fadeOut是因为.css没有在后面排队.fadeOut，所以我通过更改回调函数中的后台URL来解决这个问题fadeOut

如果您不希望同一图像在其自身之后直接重复出现，您可以将图像数组中当前图像的位置与图像数组中下一个图像的位置进行比较setInterval

于 2013-10-03T00:28:50.250 回答
0

改进@Jack Saucier 的答案，下面的代码遍历数组项并且不会连续重复图像：

var bgArray = ['http://upload.wikimedia.org/wikipedia/en/5/59/500_x_300_Ramosmania_rodriguesii_(Rubiaceae).jpg', 
             'http://upload.wikimedia.org/wikipedia/commons/5/5c/New-Withrow-Gym-500-X-300.jpg', 
             'http://inspirationfeed.com/wp-content/uploads/2010/10/22551-500x300.jpg', 
             'http://inspirationfeed.com/wp-content/uploads/2010/12/11619912483527701-500x300.jpg', 
             'http://westernstatescat.com/system/images/BAhbBlsHOgZmIigyMDExLzEyLzIwLzA5LzAwLzMzLzgwNi81MDB4MzAwLmpwZw/500x300.jpg'
           ];
var now = 0;

setInterval(function(){
        // Array of backgrounds
        now = (now+1) % bgArray.length;

        $('#slideshow').fadeOut('slow', function() { 
            $(this).css('background-image', 'url("' + bgArray[now] + '")').fadeIn('slow');
    })  
    }, 3000); // 3 second interval

现场预览：http: //jsfiddle.net/4u0pq1a5/

于 2015-06-01T23:30:10.240 回答