Фоновое изображение изменится по времени - PullRequest
Новая
       0

Фоновое изображение изменится по времени

0 голосов
/ 20 сентября 2011

Мне нужны некоторые предложения и идеи для улучшения ротатора фонового изображения.

Мысли 

<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>
  1. Я хочу, чтобы изображения соединились друг с другом.
  2. Мне нужно иметь возможность предварительно загружать изображения, чтобы не было задержки при загрузке их при первом отображении.

Ответы [ 3 ]

0 голосов
/ 20 сентября 2011

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 и расположить его позади содержимого вашего body, вот так:

http://jsfiddle.net/XH78L/

0 голосов
/ 20 сентября 2011 
<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.

0 голосов
/ 20 сентября 2011

предварительная загрузка изображений выполняется с объектом Image и его источником, как в ... 

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

, который их предварительно загрузит.

Что касается затухания, вам нужно создатьанимация с использованием свойства alpha css контейнера div.http://www.w3schools.com/css/css_image_transparency.asp

Просто увеличивайте / уменьшайте непрозрачность с течением времени.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...