Question

我需要一些建议和想法来改善背景图像旋转器。

思想？

<script type="text/javascript">
    var images = ['bg1.png', 'bg2.png', 'bg3.png'];
    var curImage = 0;
    function switchImage()
    {
        curImage = (curImage + 1) % images.length
        document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
    }
    window.setInterval(switchImage, 500);
</script>

我希望图像相互淡化。
我需要能够预先加载图像，以便在首次显示时加载图像时没有延迟。

Answer 1

使用Image对象及其源来预加载图像，如...

var img1 = new Image();
img1.src = "mypicture.jpg";

将预加载它们。

对于淡入淡出，您需要使用容器div的css的alpha属性创建动画。 http://www.w3schools.com/css/css_image_transparency.asp

只是随着时间的推移增加/减少不透明度。

Answer 2

1）预加载：

var images = ['bg1.png', 'bg2.png', 'bg3.png'];

for (var i = 0; i < images.length; i++) {
    (new Image()).src = window.location.href + '/images/' + images[i]; 
}

更改此部分window.location.href + '/images/'以更好地适合您。

2）褪色

简而言之，你无法淡化背景图片。

如果您绝对需要淡出，则必须在img标记中创建背景，并将其置于{{{}的内容后面1}}，像这样：

http://jsfiddle.net/XH78L/

Answer 3

<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script>
var displayBox;

$(document).ready(function() {

  StartShow();

});

function StartShow() {
    var interval = 5000;
    var slideShowID;

    slideShowID = setInterval(Gallery, interval);

}

function Gallery() {
  var nextImage = $("#container li.selected").next().length;
  if (nextImage > 0){
    $("#container li.selected").removeClass("selected").next().addClass("selected");
    imgSrc = $("#container li.selected").children().attr("src");
    if(imgSrc != null) {
      $("#banner").fadeOut('slow', function() { $("#banner").css("background-image", imgSrc); }).fadeIn();
    }
  }
  else {
    $("#container li.selected").removeClass("selected").siblings(':first').addClass("selected");
    imgSrc = $("#container li.selected").children().attr("src");
    if (imgSrc != null) {
      $("#banner").fadeOut('slow', function() { $("#banner").css("background-image", imgSrc); }).fadeIn();
    }
  }
}
</script>
</head>
<body>

<ul id="container" style="display: none;">
    <li class="thumbnail selected"><img src="1.jpg"/></li>
    <li class="thumbnail"><img src="2.jpg"/></li>
    <li class="thumbnail"><img src="3.jpg"/></li>
    <li class="thumbnail"><img src="4.jpg"/></li>
    <li class="thumbnail"><img src="5.jpg"/></li>
    <li class="thumbnail"><img src="6.jpg"/></li>
    <li class="thumbnail"><img src="7.jpg"/></li>
    <li class="thumbnail"><img src="8.jpg"/></li>
    <li class="thumbnail"><img src="9.jpg"/></li>
</ul>


<div id="banner"></div>

</body>
</html>

只需将起始背景图像设置为您要在陆地上加载的任何图像，然后该节目将从Document.Ready开始。

背景图像更换器的时间

3 个答案: