Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 23.10.2015, 21:57
Аватар для JsConAp
Интересующийся
Отправить личное сообщение для JsConAp Посмотреть профиль Найти все сообщения от JsConAp
 
Регистрация: 22.02.2015
Сообщений: 24

Пьяный копирайтер,


Можно еще перекидывать,картинки из начала в конец и наоборот
http://jsfiddle.net/2j2z0tu2/

Кстати советую почитать https://learn.javascript.ru

Последний раз редактировалось JsConAp, 23.10.2015 в 22:08.
Ответить с цитированием
  #12 (permalink)  
Старый 23.10.2015, 21:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <script>
         function vpravo()
 {
 document.getElementById("test").style.marginTop= "-350px";
 }

 function vlevo()
 {
 document.getElementById("test").style.marginTop= "0px";
 }
</script>

 </script>
 </head>

 <body>
 <div id="pic">
 <ul id="test">
 <li><img src="http://javascript.ru/forum/images/smilies/smile.gif" width="300" height="350"/></li>
 <li><img src="http://javascript.ru/forum/images/smilies/unsure.gif" width="300" height="350"/></li>
 <li><img src="images/3.jpg" width="300" height="350"/></li>
 <li><img src="images/4.jpg" width="300" height="350"/></li>
 <li><img src="images/6.jpg" width="300" height="350"/></li>
 </ul>
 </div>

 <style>
 #pic {
 outline: 1px solid black;
 height: 350px;
 width: 300px;
 overflow: hidden;

 }
 ul{
  margin: 0;
  padding: 0;
  transition: all 1s ease-in-out;
 }

 #pic li {
 outline: 1px solid black;
 height: 350px;
 width: 300px;
 list-style: none;
 }
 </style>

 <button type="button" onclick="vlevo()">Вниз</button>
 <button type="button" onclick="vpravo()">Вверх</button>
</body>

</html>
Ответить с цитированием
  #13 (permalink)  
Старый 23.10.2015, 22:23
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

разбираться в чужом коде это неблагодарная работа, поэтому мне проще написать свой:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>

* {
  margin:0;
  padding: 0;
  outline: none;
}

.headersliderleftclick {
    position: absolute;
    top: 230px;
    left: -210px;
    width: 115px;
    height: 115px;
    background: url(http://www.jpeghost.ru/i/1272282284_2701_r7j/10_zb3.png);
    cursor: pointer;
    opacity: 0.6;
}
.headerslider {
    box-sizing: border-box;
    margin: 0 20px;
    position: relative;
    width: 560px;
    height: 500px;
        margin-left: 200px;
}
.headeroneslide {
    position: relative;
    width: 566px;
    height: 339px;
    top: 100px;
    left: 0;
    overflow: hidden;
}
.headersliderholder {
    box-sizing: border-box;
    position: relative;
    left: 0;
    transition: all 1s ease;
    width: 1698px;
    height: 339px;
}
.headerslide {
    float: left;
    box-sizing: border-box;
    width: 566px;
    height: 339px;
    background-repeat: no-repeat;
    background-size: 573px 100%;
}
.first {
    background-image: url(http://talklove.ru/priroda/priroda-7.jpg);
}
.second {
    background-image: url(http://www.svoiludi.ru/images/tb/9844/priroda-i-vina-patagonii-tur-13724291688487_w990h700.jpg);
}
.third {
    background-image: url(http://svet-vnutri.ru/wp-content/uploads/2014/03/68074.jpg);
}
.headerslide div {
    width: 100%;
    float: left;
    height: 109px;
    margin-left: 0;
    margin-top: 0;
    background: rgba(20, 20, 20, 0.69);
    margin-top: 230px;
    padding-left: 22px;
    padding-right: 20px;
    box-sizing: border-box;
    padding-top: 10px;
}
.headslidetext h1 {
    font-size: 26px;
    color: white;
    letter-spacing: -1px;
}
.headslidetext p {
    font-size: 13px;
    color: white;
}
.headersliderrightclick {
    position: absolute;
    top: 230px;
    left: 666px;
    width: 115px;
    height: 115px;
    background: url(http://www.jpeghost.ru/i/1272282284_2701_r7j/06_o9f.png);
    background-position: 100% 50%;
    cursor: pointer;
}
</style>
</head>

<body>
  <div class="headerslider">
                <div class="headersliderleftclick"></div>
                <div class="headeroneslide">
                    <div class="headersliderholder" number='1'>
                        <div class="headerslide first">
                            <div class="headslidetext">
                                <h1>название акции</h1>
                                <p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p>
                            </div>
                        </div>
                        <div class="headerslide second">
                            <div class="headslidetext">
                                <h1>название акции 2</h1>
                                <p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p>
                            </div>
                        </div>
                        <div class="headerslide third">
                            <div class="headslidetext">
                                <h1>название акции 3</h1>
                                <p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="headersliderrightclick"></div>
            </div>

    <script>
function slider() {
                var leftClick = document.querySelector('.headersliderleftclick');
                var rightClick = document.querySelector('.headersliderrightclick');

                leftClick.onclick = function() {
                    var headerSliderHolder = document.querySelector('.headersliderholder');
                    var headerSliderHolderValue = headerSliderHolder.getAttribute('number');
                    if (headerSliderHolderValue == 1)
                        return;
                    var headerSliderHolderStyle = getComputedStyle(headerSliderHolder);
                    if (headerSliderHolderValue > 1) {
                        console.log(headerSliderHolderValue);
                        if (+headerSliderHolderValue === 3)
                            rightClick.style.opacity = '1';
                        if (+headerSliderHolderValue === 2) {
                            leftClick.style.opacity = '0.6';
                        }
                        headerSliderHolder.setAttribute('number', +headerSliderHolderValue - 1 + '');
                        headerSliderHolder.style.left = parseInt(headerSliderHolderStyle.left) + 566 + 'px';
                    }
                }

                rightClick.onclick = function() {
                    var headerSliderHolder = document.querySelector('.headersliderholder');
                    var headerSliderHolderValue = headerSliderHolder.getAttribute('number');
                    if (headerSliderHolderValue == 3)
                        return;
                    var headerSliderHolderStyle = getComputedStyle(headerSliderHolder);
                    if (headerSliderHolderValue < 3) {
                        if (+headerSliderHolderValue === 1)
                            leftClick.style.opacity = '1';
                        if (+headerSliderHolderValue === 2) {
                            rightClick.style.opacity = '0.6';
                        }
                        headerSliderHolder.setAttribute('number', +headerSliderHolderValue + 1 + '');
                        headerSliderHolder.style.left = parseInt(headerSliderHolderStyle.left) - 566 + 'px';
                    }
                }
            }
    slider();
    </script>
</body>
</html>

Последний раз редактировалось EmperioAf, 23.10.2015 в 22:25.
Ответить с цитированием
  #14 (permalink)  
Старый 24.10.2015, 08:07
Интересующийся
Отправить личное сообщение для Пьяный копирайтер Посмотреть профиль Найти все сообщения от Пьяный копирайтер
 
Регистрация: 07.02.2015
Сообщений: 12

Сообщение от JsConAp Посмотреть сообщение
Пьяный копирайтер,


Можно еще перекидывать,картинки из начала в конец и наоборот
http://jsfiddle.net/2j2z0tu2/

Кстати советую почитать https://learn.javascript.ru
Спасибо за ссылки. думаю ты прав придётся снова взяться за теорию. знаешь везде советуют learn.javascript.ru но там так много информации что со временем она вылетает из головы. приходится перечитывать снова и снова. А как ты учил JS?
Ответить с цитированием
  #15 (permalink)  
Старый 24.10.2015, 13:18
Аватар для JsConAp
Интересующийся
Отправить личное сообщение для JsConAp Посмотреть профиль Найти все сообщения от JsConAp
 
Регистрация: 22.02.2015
Сообщений: 24

Сообщение от Пьяный копирайтер
так много информации что со временем она вылетает из головы
Гугл никто не отменял,если что забыл всегда можно посмотреть.

Сообщение от Пьяный копирайтер
А как ты учил JS?
По этому учебнику и начинал учить. Читайте,выполняйте задачки и все будет гуд)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите плис новичку в ajax urel AJAX и COMET 6 12.01.2013 21:36
Помогите новичку! Анатолий Саратовцев Events/DOM/Window 7 04.08.2012 17:46
помогите новичку с поиском! real-man AJAX и COMET 8 12.06.2011 14:07
Выезжающая картинка. помогите плз новичку(( animus Элементы интерфейса 4 22.04.2011 14:31
Помогите новичку с выпадающим списком interest Элементы интерфейса 5 19.05.2010 13:15