Javascript-форум - Ссылка картинка

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Ссылка картинка (https://javascript.ru/forum/jquery/64559-ssylka-kartinka.html)

laimas,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
     position: relative;
     width: 640px;
     height: 480px;
  }
  .slider *{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
  .slider a {
    z-index: 1;
  }

  .slider a:first-child {
    z-index: 10;
  }
  .slider a:nth-child(2) {
    z-index: 5;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(function () {

            !function f() {
            $('.slider a:first-child').delay(3000).fadeTo(500, 0, function() {
                $(this).appendTo('.slider').css({opacity:1});f();
            })
            }()

    });
  </script>
</head>

<body>
<div class="slider">
    <a href="#"><img src="http://www.fonstola.ru/pic/201303/640x480/fonstola.ru-91576.jpg" alt="Img 1" /></a>
    <a href="#"><img src="http://files.vividscreen.info/soft/368b834b2d1a426882a89edab24232e9/Autumn-Forest-640x480.jpg" alt="Img 2" /></a>
    <a href="#"><img src="http://www.allfons.ru/pic/201201/640x480/allfons.ru-4352.jpg" alt="Img 3" /></a>
    <a href="#"><img src="http://uvdhmao.ru/upload/iblock/a6e/a6e740a7fa90f2aae6f1ac0dcd5ec5cf.jpg" alt="Img 4" /></a>
</div>
</body>
</html>

В этом смысле. Можно, но это же не удаление таймера, а лишь "визуальная" замена записи setInterval на delay :)

Ребят большое спасибо всем вам за помощь с проблемой ссылок разобрался и понял, но вот со стилями(( иза них не отображается не чего

.slider {
    position:relative;
    width: 94%;
    max-width: 1180px;
    height: 100%;
	margin:20px 3% 10px;
    height:412px;
}

.slider a{
	position: absolute;
}

.slider img {
    position:absolute;
    background-color: #f3f4ef;
    border: 1px solid #dedede;
    padding: 5px;
    box-shadow: 0 0 9px #000;
}

Цитата:

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

"визуальная" замена записи setInterval

неа тама сейчас requestAnimationFrame

pankrat,
смотрите другое css это никак не влиет

pankrat,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider {
    position:relative;
    width: 94%;
    max-width: 1180px;
    height: 100%;
  margin:20px 3% 10px;
    height:412px;
}

.slider a{
  position: absolute;
}

.slider img {
    position:absolute;
    background-color: #f3f4ef;
    border: 1px solid #dedede;
    padding: 5px;
    box-shadow: 0 0 9px #000;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(function () {

            !function f() {
            $('.slider a:first-child').delay(3000).fadeTo(500, 0, function() {
                $(this).appendTo('.slider').css({opacity:1});f();
            })
            }()

    });
  </script>
</head>

<body>
<div class="slider">
    <a href="#"><img src="http://www.fonstola.ru/pic/201303/640x480/fonstola.ru-91576.jpg" alt="Img 1" /></a>
    <a href="#"><img src="http://files.vividscreen.info/soft/368b834b2d1a426882a89edab24232e9/Autumn-Forest-640x480.jpg" alt="Img 2" /></a>
    <a href="#"><img src="http://www.allfons.ru/pic/201201/640x480/allfons.ru-4352.jpg" alt="Img 3" /></a>
    <a href="#"><img src="http://uvdhmao.ru/upload/iblock/a6e/a6e740a7fa90f2aae6f1ac0dcd5ec5cf.jpg" alt="Img 4" /></a>
</div>
</body>
</html>

Цитата:

Сообщение от рони (Сообщение 426205)

pankrat,
смотрите другое css это никак не влиет

Только эта часть css отвечает у меня за вывод этого слайдера

Цитата:

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

тама сейчас requestAnimationFrame

Для новых браузеров да, да и то зоопарк. )

Вот как отображается,
Сайт onlajn-smotret.инфо
Подскажите пожалуйста где косяк?

pankrat,
а нормально ссылку дать?