Babyslam,
не учли css
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<style type='text/css'>
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,abbr,acronum{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:''}
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:first-child{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>
$(window).load(function() {
$(function() {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexImg = 1,
indexMax = el.length,
phase = 2000,
timer;
var radios = $('[name="rad"]');
function change(v) {
if (radios[0].checked == true) {
el.stop(true, true);
var next = el.eq(indexImg - 1);
el.not(next).animate({
"left": v ? -680 : 680,
opacity: 1
}, 800);
next.css({
left: v ? 620 : -620
}).animate({
"left": 20,
opacity: 1
}, 800)
} else if (radios[1].checked == true) {
el.stop(true, true).css({
opacity: 1
});
var next = el.eq(indexImg - 1);
next.appendTo(elWrap).css({
left: v ? 620 : -620
}).animate({
"left": 20
}, 800)
} else {
el.stop(true, true).css({
"left": 20
});
var next = el.eq(indexImg - 1);
el.not(next.animate({
opacity: 1
}, 800)).animate({
opacity: 0
}, 800);
}
}
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) {
btnNext.hide();
}
btnPrev.show();
change(true);
});
btnPrev.click(function() {
window.clearTimeout(timer)
indexImg--;
if (indexImg == 1) {
btnPrev.hide()
}
change();
btnNext.show();
}).hide();
});
});
</script>
</head>
<body>
<div id="slider" class="slider_wrap">
<img src="http://hostingfortraineeship.esy.es/Java4/slider_image2.jpg" alt="2" />
<img src="http://hostingfortraineeship.esy.es/Java4/slider_image3.jpg" alt="3" />
<img src="http://hostingfortraineeship.esy.es/Java4/slider_image1.jpg" alt="3" />
</div>
<ul>
<li>
<input type="radio" class="example" name="rad">
</li>
<li>
<input type="radio" class="example" name="rad">
</li>
<li>
<input type="radio" class="example" name="rad">
</li>
</ul>
</body>
</html>