Вариант 3
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Java 4</title>
<style type="text/css">
/*start reset*/
body, div, dl, dt,dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, hr, td {
margin:0; padding:0;
}
table {
border-collapse:collapse; border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal; font-weight:normal;
}
ol, ul {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%; font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronum {
border:0;
}
/*end reset*/
html, body {
height:100%;
font:normal 12px/18px Arial, san-serif;
}
.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
opacity: 0;
width:640px;
height:auto;
display:block;
position:absolute;
top:0;
left:-640px;
}
.slider_wrap img {
left: 20px;
opacity: 1;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(http://hostingfortraineeship.esy.es/java4/slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>$(function () {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexMax = el.length,
indexImg = el.length,
phase = 2000,
timer;
function change(v) {
el.stop(true,true);
var next = el.eq(indexImg-1);
next.appendTo(elWrap).css({left: v ? 620 : -620}).animate({"left": 20}, 800)
}
function autoCange () {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change(true);
timer = window.setTimeout(autoCange, phase);
}
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
window.clearTimeout(timer)
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change (true);
});
btnPrev.click(function() {
window.clearTimeout(timer)
indexImg --;
if(indexImg < 1) {
indexImg = indexMax;
}
change();
});
autoCange()
});
</script>
</head>
<body>
<div id="slider" class="slider_wrap">
<img src="https://unsplash.it/600/1067?image=1002" alt="1" />
<img src="https://unsplash.it/600/1067?image=1003" alt="2" />
<img src="https://unsplash.it/600/1067?image=1001" alt="3" />
</div>
</body>
</html>