Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.06.2012, 15:49
Интересующийся
Отправить личное сообщение для sitebuilder Посмотреть профиль Найти все сообщения от sitebuilder
 
Регистрация: 26.02.2012
Сообщений: 25

Смена фоновой картинки через каждые 5 секунд
У меня есть
<div id="place"></div>


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

Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 30.06.2012, 16:30
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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>

Последний раз редактировалось Deff, 30.06.2012 в 18:27.
Ответить с цитированием
  #3 (permalink)  
Старый 30.06.2012, 17:37
Интересующийся
Отправить личное сообщение для sitebuilder Посмотреть профиль Найти все сообщения от sitebuilder
 
Регистрация: 26.02.2012
Сообщений: 25

Круто. А как быть если картинки у меня большие и при подгрузке очередной возникает на долю секунды пустое пространство. Можно ли как то показывать следующую картинку только после полной ее загрузки?
Ответить с цитированием
  #4 (permalink)  
Старый 30.06.2012, 17:41
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

sitebuilder,
1. cоздайте нужное кол-во диваков с заранее установленным фоном(фон ставите сss), а скриптом предыдущий display: none: а последущий - display:block;
Ответить с цитированием
  #5 (permalink)  
Старый 14.03.2017, 19:12
Новичок на форуме
Отправить личное сообщение для e-partner Посмотреть профиль Найти все сообщения от e-partner
 
Регистрация: 14.03.2017
Сообщений: 5

Прошу помочь доработать скрипт
Всем доброго времени суток!

Помогите пожалуйста доработать данный скрипт. Он очень хорошо работает и быстро, но хотелось бы, чтобы фоновые картинки переключались плавно.
Для меня это очень сложно сейчас. я новичок. Очень прошу помочь!
Ответить с цитированием
  #6 (permalink)  
Старый 14.03.2017, 20:08
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Дёшего и сердито
<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>

Последний раз редактировалось Paguo-86PK, 14.03.2017 в 20:12.
Ответить с цитированием
  #7 (permalink)  
Старый 14.03.2017, 20:35
Новичок на форуме
Отправить личное сообщение для e-partner Посмотреть профиль Найти все сообщения от e-partner
 
Регистрация: 14.03.2017
Сообщений: 5

Спасибо, 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

e-partner,
слайдер блоками с opacity
Ответить с цитированием
  #9 (permalink)  
Старый 14.03.2017, 21:10
Новичок на форуме
Отправить личное сообщение для e-partner Посмотреть профиль Найти все сообщения от e-partner
 
Регистрация: 14.03.2017
Сообщений: 5

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

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

Последний раз редактировалось e-partner, 14.03.2017 в 21:24.
Ответить с цитированием
  #10 (permalink)  
Старый 14.03.2017, 21:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Сообщение от 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())
    }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Узнать размер картинки через форму file Sergey67 Общие вопросы Javascript 1 24.12.2011 06:37
Смена картинки по наведению курсора мыши 5 секунд MironM Общие вопросы Javascript 22 27.09.2011 16:39
Изменение размеров картинки через скрипт SLV Общие вопросы Javascript 4 27.12.2010 11:40
Динамическое изменение размеров фоновой картинки ячейки shaitan Элементы интерфейса 4 15.04.2010 13:30
смена фоновой картинки у таблицы cuberboy Общие вопросы Javascript 0 15.10.2009 23:06