Смена фоновой картинки через каждые 5 секунд
У меня есть
<div id="place"></div> Как сделать чтобы через каждые 5 секунд менялось бы фоновое изображение у DIVa? У меня 5 фоновых картинок, после 5-й нужно чтобы опять первая загружалась и так по кругу. Заранее спасибо. |
<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,
1. cоздайте нужное кол-во диваков с заранее установленным фоном(фон ставите сss), а скриптом предыдущий display: none: а последущий - display:block; |
Прошу помочь доработать скрипт
Всем доброго времени суток!
Помогите пожалуйста доработать данный скрипт. Он очень хорошо работает и быстро, но хотелось бы, чтобы фоновые картинки переключались плавно. Для меня это очень сложно сейчас. я новичок. Очень прошу помочь!:help: |
Дёшего и сердито
<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>
|
Спасибо, 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>
У меня была мысль как-то перенести параметр :write: : document.getElementById(' ... ').style.opacity в исходный текст кода у ТС (который у Deff во втором сообщении) таким образом, чтобы было как бы выплывание фоновой картинки из другой, а не обесцвечивание до фона страницы и переключение на другую. Это возможно? |
e-partner,
слайдер блоками с opacity |
Цитата:
но пока что хочется, чтобы одна картинка выплывала из другой, при этом хочется без подключения библиотек JQuary, чтобы все работало быстро, без проблем у некоторых юзеров и у меня. А еще, рони, как у вас сделать, чтобы слайдер работал только в одну сторону? (вправо скажем) |
Цитата:
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())
}
|
Цитата:
P.S.: Чем и оправдывается сложность анимации в ней… P.P.S.: И является тестом: Являетесь ли Вы читателем самого популярного журнала и компьютера нашего поколения… |
Цитата:
P.S. Плавную смену картинок - другим на заметку - я додумался сам как сделать: беру дополнительный див, приклепляю к нему фон. А второй див сверху по скрипту Paguo-86PK - и фон то появляется, то исчезает, меняя свои картинки. В итоге получилось примерно что хотелось: фоновые картинки плавно появляются и исчезают. Единственное, хочется, чтобы была пауза когда картинка уже появилась, а не была непрерывная смена картинок. |
Более аккуратный вариант
<style>
.ghost_thumb {
height :120px;
}
.ghost_thumb img {
position :absolute;
}
</style>
<script>
var Ghosting = function(ghosts) {
var Thumbs = [];
function Slider() {
Thumbs.forEach(function(thumb) {
var gap = thumb.pause + thumb.fading;
thumb.phase = (thumb.phase + 1) % (gap * thumb.slides.length);
var phase = thumb.phase % gap;
var index = (thumb.phase - phase) / gap;
var next = (index + 1) % thumb.slides.length;
if(phase >= thumb.pause)
thumb.slides[index].style.opacity = 1.0 - (phase - thumb.pause) / thumb.fading,
thumb.slides[next].style.opacity = 0.0 + (phase - thumb.pause) / thumb.fading;
});
setTimeout(Slider.bind(this), 10);
}
ghosts.forEach(function(thumb) {
var props = thumb.split(/\s+/);
var el = document.getElementById(props[0]);
if(el) {
var imgs = el.getElementsByTagName("img");
if(imgs.length) {
Thumbs.push({
frame : el,
slides : imgs,
fading : props[1],
pause : props[2],
phase : 0
});
for(var i = 0; i < imgs.length; ++ i)
imgs[i].style.opacity = 0;
}
}
Slider();
});
}
</script>
<body onload='Ghosting(["Gallery_two 25 3","Gallery_three 15 9"])'>
<p>Плавность - 25, Пауза - 3</p>
<div id=Gallery_two class=ghost_thumb>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img src='http://a.disquscdn.com/1489123367/images/noavatar92.png' />
</div>
<p>Плавность - 15, Пауза - 9</p>
<div id=Gallery_three class=ghost_thumb>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img src='http://a.disquscdn.com/1489123367/images/noavatar92.png' />
<img src='http://javascript.ru/forum/image.php?u=3602&dateline=1489262044' />
</div>
</body>
|
смена картинок с opacity эффектом
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel{
width: 350px;
height: 170px;
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
transition: opacity .8s ease-in;
}
.carousel img.show{
opacity: 1;
}
.carousel.vertical{
width: 170px;
height: 350px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".carousel"), function(el) {
var img = el.querySelectorAll("img"),
len = img.length,
i = len - 1,
p = el.dataset.pause || 5E3;
!function g() {
img[i].classList.remove("show");
i = ++i % len;
img[i].classList.add("show");
window.setTimeout(g, p)
}()
})
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000">
<img src="http://sport-magazindom.ru/wp-content/uploads/2016/05/1cbe44f2ac36cff2da2bbf7356b4a004.jpg" alt="">
<img src="http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg" alt="">
<img src="http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg" alt="">
<img src="http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg" alt="">
</div>
<div class="carousel vertical" data-pause="1000">
<img src="https://im0-tub-ru.yandex.net/i?id=164eda9533e043b61c9abb3e9fb9ecc6-l&n=13" alt="">
<img src="http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png" alt="">
<img src="http://rugirlz.com/pics/hv_dp20088034.jpg" alt="">
<img src="https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13" alt="">
</div>
</body>
</html>
|
Спасибо, Рони и Радио-86РК, вам уже плюсики сайт не дает ставить. Другие за меня поставят! :) )))
Вы немного отклонились от темы и от моего задания: менять нужно именно фоновые картинки. Я по этой поисковой фразе из Гугла сюда и пришел. Хороший скрипт по смене картинок у меня есть, а вот к фоновым картинкам он не подошел...потому и начал искать))). В любом случае всем спасибо за помощь, по другим вопросам я сам также "за лайки" помогал людям на форумах! ))) P.S. Как я понимаю, в последний двух постах с кодом нужно добавить "document.getElementById(" там где надо, чтобы была именно фоновая картинка, а не img. А где это надо - кому надо найдет))) |
смена фона с opacity эффектом
e-partner,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel{
width: 350px;
height: 170px;
position: relative;
opacity: 0;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
transition: opacity .8s ease-in;
background-size: 350px 170px;
}
.carousel.show{
opacity: 1;
}
.carousel.vertical{
width: 170px;
height: 350px;
background-size: 170px 350px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".carousel"), function(el) {
var img = JSON.parse(el.dataset.src),
len = img.length,
i = len - 1,
p = el.dataset.pause || 5E3;
function g() {
i = ++i % len;
el.style.backgroundImage = "url(" + img[i] + ")";
el.classList.add("show");
window.setTimeout(k, p)
}
g();
function k() {
el.classList.remove("show");
window.setTimeout(g, 800)
}
})
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000"
data-src='["http://sport-magazindom.ru/wp-content/uploads/2016/05/1cbe44f2ac36cff2da2bbf7356b4a004.jpg",
"http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg",
"http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg",
"http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg"]'>
</div>
<div class="carousel vertical" data-pause="5000" data-src='[
"https://im0-tub-ru.yandex.net/i?id=164eda9533e043b61c9abb3e9fb9ecc6-l&n=13",
"http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png",
"http://rugirlz.com/pics/hv_dp20088034.jpg",
"https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13"]'>
</div>
</body>
</html>
|
Цитата:
Использовали css3-трюки, с которыми я вообще поленился некогда разбираться ещё при начале распространения html5 и svg.;) P.S.: Сейчас нужно разобраться с собственным DVR-плагином. А то преждний писал впопыхах, тяп-ляп и как попало, чтобы попрактиваться со Squirrel на досуге…:blink: Теперь расплачиваюсь и пишу всё заново:write: И спотыкаюсь всюду. Ползу медленнее черепахи:D |
| Часовой пояс GMT +3, время: 03:30. |