Сообщение от 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>