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

Сообщение от EmperioAf Посмотреть сообщение
упрощённо делается это следующим образом:
в блок размером скажем 100x100 помещается блок с размером количество картинок*100x100.
Внутри него помещается список (ul) в котором содержаться картинки.
в итоге видна снаружи только одна картинка. Далее делаются две абсолютно позиционнированные кнопки и по нажатию на кнопку можно у списка менять либо margin-left, либо сделать списку position: relative и менять left, либо вообще пользоваться трансформациями (лучше jQuery использовать для трансформаций)

Посмотри пожалуйста код. Вроде все сделал как ты написал. но ничего не работает.
function vpravo()
        {
        document.getElementById("ul").style.marginTop= "-350px";
        }
        
        function vlevo()
        {
        document.getElementById("ul").style.marginTop= "350px";
        }
    </script>
</head>

    <body>
      <div id="pic">
        <ul id="">
         <li><img src="images/1.jpg" width="300" height="350"/></li>
         <li><img src="images/2.jpg" 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;
     
}
#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>

Последний раз редактировалось Пьяный копирайтер, 24.10.2015 в 08:01.
Ответить с цитированием