Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Появление и исчезновение картинки(объекта) через определенное время. (https://javascript.ru/forum/misc/35180-poyavlenie-i-ischeznovenie-kartinki-obekta-cherez-opredelennoe-vremya.html)

_D1m0n_ 02.02.2013 18:12
Появление и исчезновение картинки(объекта) через определенное время.
 
Здравствуйте, понадобился такой скрипт для сайта, чтобы через определенное время появлялась картинка, повисела немного, и исчезла, а затем чтобы через определенное время все повторилось. В языке javascript совершенно не разбираюсь. Помогите пожалуйста. :help:

Tek 02.02.2013 19:18
http://jsfiddle.net/t5T9E/5/ решение твоей проблемы

рони 02.02.2013 19:59
Цитата:
Сообщение от Tek
решение твоей проблемы
немного бы его доработать :-?

_D1m0n_ 02.02.2013 20:05
огромное спс даже не знаю как выразить свою радость, просто ради одного скрипта не хочется учить целый язык, хотя если честно даже интересно стало как свой проект закончу (с сайтом) возьмусь за самоучитель))) еще раз спс

рони 02.02.2013 20:13
_D1m0n_,
не губите свой сайт :cray:

_D1m0n_ 02.02.2013 20:30
а куда деваться просто у меня на сайте есть кнопки так сказать скрытые и вот хотел сделать как бы появляющиеся подсказки, я конечно знаю и понимаю что это можно было бы сделать и другими способами просто у меня там даже определенный сюжет назревает, который можно только таким образом решить. Да если честно я сам себя не понял))) Поэтому прикрепляю ИЗО

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

рони 02.02.2013 20:38
_D1m0n_, боле мене нормальная мигалка
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
    #test{
    display:none;
}
  </style>
<script type='text/javascript'>
window.onload=function(){
var image = document.getElementById("test");
var i = 0, s = ["block","none"],t = [2000,5000]; //2 сек есть картинка, 5 сек нет
function show()
{  i ^= 1
   image.style.display = s[i];
    setTimeout(show,t[i]);
}
show()
}
</script>
</head>
<body>
  <img id="test"  src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</body>
</html>

_D1m0n_ 02.02.2013 20:41
спс огромное

Jakuzi 03.04.2014 18:42
Цитата:
Сообщение от рони (Сообщение 231107)
_D1m0n_, боле мене нормальная мигалка
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
    #test{
    display:none;
}
  </style>
<script type='text/javascript'>
window.onload=function(){
var image = document.getElementById("test");
var i = 0, s = ["block","none"],t = [2000,5000]; //2 сек есть картинка, 5 сек нет
function show()
{  i ^= 1
   image.style.display = s[i];
    setTimeout(show,t[i]);
}
show()
}
</script>
</head>
<body>
  <img id="test"  src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</body>
</html>
а как сделать для нескольких изображений?чтоб с различными интервалами появлялись?:help:

рони 03.04.2014 21:17
Цитата:
Сообщение от Jakuzi
а как сделать для нескольких изображений?чтоб с различными интервалами появлялись?
учить js!!!
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
  .hide {
    opacity: 0;
  }

  </style>
<script type='text/javascript'>
window.onload=function(){
function toggle(id, range)
{
range = range||[2,5];//2 сек картинка появляется, 5 сек исчезает
var image = document.getElementById(id),
    i = 0, s = ["block","none"];
function show()
{
   //image.style.display = s[i];
   image.style.transition = 'all '+range[i]+'s';
   image.style.webkitTransition = 'all '+range[i]+'s';
   image.style.mozTransition = 'all '+range[i]+'s';
   image.style.oTransition = 'all '+range[i]+'s';
   image.className = i ? 'hide' : ''
   setTimeout(show,range[i]*1000);
   i ^= 1
}
show()
}
toggle('test')
toggle('ddd',[1,1])
toggle('bbb',[5,2])

}
</script>
</head>
<body>
  <img id="ddd"  src="http://javascript.ru/img/ws_1.png">
  <img id="test"  src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
  <img id="bbb"  src="http://im31.gulfup.com/jus2H.jpg">
</body>
</html>

Jakuzi 03.04.2014 23:13
спасибо большое,в процессе
а как сделать чтоб картинки изначально были скрыты?

kay 17.03.2015 15:04
Цитата:
Сообщение от рони (Сообщение 305933)
учить js!!!
Всё верно. Учить надо.
Помогите, пожалуйста, изменить данный (последний вариант) скрипт :help:
Очень нужно установить время показа картинки и паузу между показами. То есть интервал, через который плавно исчезнувшая картинка плавно появится вновь.

Спасибо.

рони 17.03.2015 15:40
Цитата:
Сообщение от kay
Помогите, пожалуйста, изменить данный (последний вариант) скрипт
Очень нужно установить время показа картинки и паузу между показами. То есть интервал, через который плавно исчезнувшая картинка плавно появится вновь.
всё это есть в 10 посте

kay 17.03.2015 16:02
В 10м посте указывается только время плавности появления и исчезания картинки, а интервалов показа и повтора нет. Картинка просто плавно мигает, быстрее или медленнее.

рони 17.03.2015 17:10
kay,
:-? 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
  img{
    -webkit-transition : all 1.8s;
    -moz-transition : all 1.8s;
    -o-transition : all 1.8s;
    transition : all 1.8s;
  }

  </style>
<script type='text/javascript'>
window.onload=function(){
function toggle(id, range)
{
range = range||[2,5];//2 сек картинка есть, 5 сек нет
var image = document.getElementById(id),
    i = 0;
function show()
{
   image.style.opacity = i ? 0 : 1;
   setTimeout(show,range[i]*1000);
   i ^= 1
}
show()
}

toggle('bbb',[10,5])

}
</script>
</head>
<body>
  <img id="bbb"  src="http://aromatmeda.ru/d/292096/d/419594603_6.jpg">
</body>
</html>

kay 18.03.2015 08:20
Да, огромное :thanks: !!!

Если можно, добавьте, пожалуйста, возможность появления картинок по очередности. Буду ОЧЕНЬ признателен!

рони 18.03.2015 09:14
kay,
:cray: http://javascript.ru/forum/dom-windo...tml#post346808
там на любой вкус ещё примеры

kay 18.03.2015 09:42
...попробовал изловчиться, взял кусочек кода для смены картинок из одного из предложенных Вами по ссылке кода и попытался вставить в этот скрипт :-?

рони 18.03.2015 09:46
Цитата:
Сообщение от kay
взял кусочек кода для смены картинок из одного из предложенных Вами по ссылке кода и попытался вставить в этот скрипт
а чем готовые решения не подходят? вам нужен слайдер ищите слайдер их сотни если не тысячи

kay 18.03.2015 11:12
дело в том что слайдер не подходит. :( нужен именно собственный скрипт, который должен показывать картинки, количеством до 10 штук, с определенным интервалом между ними и настраиваемым временем показа каждой из них. Показ картинок должен быть зациклен.

рони 18.03.2015 11:52
kay,
посмотрите всю тему по ссылке неужели там нет то что вы ищите

kay 18.03.2015 12:20
к сожалению нет :no:
в теме сначала идёт речь о временном появлении картинки поверх другой, а затем Ваш код, который просто плавно меняет картинки одну за другой.

рони 18.03.2015 12:33
Цитата:
Сообщение от kay
к сожалению нет
тогда ничем не могу помочь

rsw 22.06.2015 14:44
Подскажите пожалуйста, что нужно изменить в коде ниже, чтобы после исчезании картинки на её месте появился текст?

Заранее благодарен!

<script type="text/javascript">
window.onload=function(){
var image1 = document.getElementById("test");
var image2 = document.getElementById("test2");
var i = 0, s = ["block","none"],t = [8000,5000]; //2 сек есть картинка, 5 сек нет
function show(){ 
 i ^= 1
 image1.style.display = s[i];
 image2.style.display = s[i];
 setTimeout(show,t[i]);
}
show()
}
</script>

<img id="test" src="http://rswbox.ru/files/img515764.jpg">

рони 22.06.2015 16:41
rsw,
добавить test2 с текстом

rsw 22.06.2015 18:53
Тогда текст будет исчезать вместе с картинкой, а мне нужно чтобы после исчезновении картинки, на её месте появился текст. Подскажите пожалуйста как это сделать если знаете. Я в java не очень силён :)

рони 22.06.2015 20:11
rsw,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
<script type="text/javascript">
window.onload=function(){
var image1 = document.getElementById("test");
var image2 = document.getElementById("test2");
var i = 0, s = ["block","none"],t = [8000,5000]; //2 сек есть картинка, 5 сек text
function show(){

 image1.style.display = s[i];
 i ^= 1
 image2.style.display = s[i];
 setTimeout(show,t[i]);
}
show()
}
</script>
</head>

<body>


<img id="test" src="http://rswbox.ru/files/img515764.jpg">
<div id="test2">text</div>
</body>

</html>

rsw 23.06.2015 15:16
Помогло, большое спасибо!


Часовой пояс GMT +3, время: 10:26.