Пьяный копирайтер,
:blink: Можно еще перекидывать,картинки из начала в конец и наоборот http://jsfiddle.net/2j2z0tu2/ Кстати советую почитать https://learn.javascript.ru |
:-? Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: 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>
|
разбираться в чужом коде это неблагодарная работа, поэтому мне проще написать свой:
<!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>
|
Цитата:
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 12:09. |