Показать сообщение отдельно
  #2 (permalink)  
Старый 17.07.2016, 11:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Black_Star,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Picture</title>
    <style type="text/css">
    #box {
        position: relative;
        width: 500px;
        height: 300px;
        background-color: green;
        color: white;
    }

    #textBox {
        float: right;
        background-color: red;
        color: white;
        font-size: 1.2em;
        height: 100px;
        width: 200px;
    }
    </style>
</head>

<body>
    <div id="box">
        <div id="pictureBox"></div>
        <div id="textBox"></div>
    </div>
    <script type="text/javascript">
    var div = document.getElementById('box');
    var textBox = document.getElementById('textBox');
    var parentEl = document.getElementById("pictureBox"),
       img = document.createElement("IMG");
        img.width = "150";
        img.height = "150";

        parentEl.appendChild(img);

    textBox.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
    var arrSrc = ["http://i58.fastpic.ru/big/2013/1229/64/ea5a462abc691f56592c3c68768ed864.jpg",
    "http://www.chelnyltd.ru/images/article/3_9902_pic_13%D0%B0%D0%BF%D1%80%D0%B5%D0%BB%D1%8F%D0%A0%D0%9E%D0%9A.jpeg",
    "http://portamur.ru/upload/iblock/3af/-mkpk.jpg"], indx = 0, len = arrSrc.length;

    (function pictureBox() {
    img.src = arrSrc[indx];
    indx = ++indx%len;
    setTimeout(pictureBox, 3000);
    })()

    </script>
</body>

</html>
Ответить с цитированием