Форум

sitebuilder · #1 (**permalink**) 30.06.2012, 15:49

У меня есть

<div id="place"></div>

Как сделать чтобы через каждые 5 секунд менялось бы фоновое изображение у DIVa? У меня 5 фоновых картинок, после 5-й нужно чтобы опять первая загружалась и так по кругу.

Заранее спасибо.

Deff · #2 (**permalink**) 30.06.2012, 16:30

<div id="place" style="border:red solid 1px;height:100px;width:340px;"></div>
<script type="text/javascript">
    var phr = new Array();
    phr.push("http://mybb.ru/f/collection/0211.gif");
    phr.push("http://mybb.ru/f/collection/0213.gif");
    phr.push("http://i039.radikal.ru/0806/ec/a5ffc6d7cfd9.gif");

function Rotator_cont() {
var s = 5000;  // Время отображения
var N=phr.length;
var i=Math.round(Math.random()*(N));Rotator(i);

function Rotator(i){
i++; if(i>N-1){i=0};//alert(i);
document.getElementById('place').style.backgroundImage='url('+phr[i]+')';
timerId01=setTimeout(function(){Rotator(i)},s);return;}
}Rotator_cont()

</script>

sitebuilder · #3 (**permalink**) 30.06.2012, 17:37

Круто. А как быть если картинки у меня большие и при подгрузке очередной возникает на долю секунды пустое пространство. Можно ли как то показывать следующую картинку только после полной ее загрузки?

Deff · #4 (**permalink**) 30.06.2012, 17:41

sitebuilder,
1. cоздайте нужное кол-во диваков с заранее установленным фоном(фон ставите сss), а скриптом предыдущий display: none: а последущий - display:block;

e-partner · #5 (**permalink**) 14.03.2017, 19:12

Всем доброго времени суток!

Помогите пожалуйста доработать данный скрипт. Он очень хорошо работает и быстро, но хотелось бы, чтобы фоновые картинки переключались плавно.
Для меня это очень сложно сейчас. я новичок. Очень прошу помочь!

Paguo-86PK · #6 (**permalink**) 14.03.2017, 20:08

<head>
<style>
#WallPaper0 {
	position	:absolute;
	background	:url('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif');
	height		:128px;
	width		:128px;
}
#WallPaper1 {
	position	:absolute;
	background	:url('http://a.disquscdn.com/1489123367/images/noavatar92.png');
	height		:128px;
	width		:128px;
}
</style>
<script>
var	wallpaper = 0,
	wallslide = 0;
function fader() {
	setTimeout(fader, 25);
	document.getElementById("WallPaper" + wallpaper).style.opacity = 1.0 - Math.abs(100 - wallslide) / 100;
	wallslide -= 5;
	if(wallslide < 0) {
		wallslide = (wallslide + 200) % 200;
		wallpaper ++;
		if(!document.getElementById("WallPaper" + wallpaper))
			wallpaper = 0;
	}
}
</script>
</head>
<body onload='fader()'>
<span id=WallPaper0>para</span>
<span id=WallPaper1>head</span>
</body>

e-partner · #7 (**permalink**) 14.03.2017, 20:35

Спасибо, Paduo...ваш вариант совсем другой. В принципе, для "сердито" подойдет))),
только хочется, чтобы одна картинка накладывалась на другую, и между ними чтобы не было белого фона страницы.

Я вот что нашел еще:

<head>
<script type="text/javascript">
  var total_pics_num = 4; // колличество изображений
  var interval = 5000;    // задержка между изображениями
  var time_out = 1;       // задержка смены изображений
  var i = 0;
  var timeout;
  var opacity = 100;
  function fade_to_next() {
    opacity--;
    var k = i + 1;
    var image_now = 'image_' + i;
    if (i == total_pics_num) k = 1;
    var image_next = 'image_' + k;
    document.getElementById(image_now).style.opacity = opacity/100;
    document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
    document.getElementById(image_next).style.opacity = (100-opacity)/100;
    document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
    timeout = setTimeout("fade_to_next()",time_out);
    if (opacity==1) {
      opacity = 100;
      clearTimeout(timeout);
    }
  }
  setInterval (
    function() {
      i++;
      if (i > total_pics_num) i=1;
      fade_to_next();
    }, interval
  );
</script>
</head>

/*---------------

<body>
<div>
  <img src='slide_1.jpg' id="image_1" style="position: absolute;" />
  <img src='slide_2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='slide_3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='slide_4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
</div>
</body>

У меня была мысль как-то перенести параметр

:
document.getElementById(' ... ').style.opacity в исходный текст кода у ТС (который у Deff во втором сообщении) таким образом, чтобы было как бы выплывание фоновой картинки из другой, а не обесцвечивание до фона страницы и переключение на другую. Это возможно?

рони · #8 (**permalink**) 14.03.2017, 20:52

e-partner,
слайдер блоками с opacity

e-partner · #9 (**permalink**) 14.03.2017, 21:10

Сообщение от рони

e-partner,
слайдер блоками с opacity

Спасибо за такой вариант, рони, рассмотрю его для сайта,
но пока что хочется, чтобы одна картинка выплывала из другой, при этом хочется без подключения библиотек JQuary, чтобы все работало быстро, без проблем у некоторых юзеров и у меня.

А еще, рони, как у вас сделать, чтобы слайдер работал только в одну сторону? (вправо скажем)

рони · #10 (**permalink**) 14.03.2017, 21:44

Сообщение от e-partner

вправо скажем

function q(a, n) {
        //(r ^= 1) && a.reverse();
        $.when.apply(null, a.map(function(k, c) {
            var b = (n/a.length) * c;
            return k.css({
                "z-index": 100
            }).delay(b).animate({
                opacity: 0
            }, {
                easing: "easeOutCirc",
                duration: 300
            })
        })).done(function() {
            a.forEach(function(a) {
                a.remove()
            });
            setTimeout(m, 1E3)
        })
    }
        var op = [100,1];//!!!
    function m() {
        //Math.random() < .2 && op.reverse();
        var e = n(a[1].src, a[0].src, op[0], op[1]);
        q(e,1200);
        a.push(a.shift())
    }

Форум

Справочник

Discord чат

Курсы javascript