Нужно уменьшить код js так что бы каждая кнопка отвечала за действие скоем окне но при этом код был короче не повторялся
Вот код html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Skin Editor</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div align="center">
<div><h2 style="font-family:arial;">Skin editor Beta 0.2</h2></div>
<div id="slider" class="slider_wrap" style="top: 60px;
z-index: 2;">
<img src="img/man/head/s1k.PNG" alt="" />
<img src="img/man/head/s2k.PNG" alt="" />
<img src="img/man/head/s3k.PNG" alt="" />
<span class="next"></span><span class="prev"></span>
</div>
<div id="slider2" class="slider_wrap" style="z-index:1;">
<img src="img/man/body/sk1.PNG" alt="" />
<img src="img/man/body/sk2.PNG" alt="" />
<img src="img/man/body/sk3.PNG" alt="" />
<img src="img/man/body/sk4.PNG" alt="" />
</div>
</div>
</body>
</html>
вот js
$(function head () {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexImg = 1,
indexMax = el.length,
phase = 3000;
function change () {
el.fadeOut(0);
el.filter(':nth-child('+indexImg+')').fadeIn(0);
}
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change ();
});
btnPrev.click(function() {
indexImg--;
if(indexImg < 1) {
indexImg = indexMax;
}
change ();
});
});
/*Body*/
$(function body () {
var elWrap = $('#slider2'),
el = elWrap.find('img'),
indexImg = 1,
indexMax = el.length,
phase = 3000;
function change () {
el.fadeOut(0);
el.filter(':nth-child('+indexImg+')').fadeIn(0);
}
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change ();
});
btnPrev.click(function() {
indexImg--;
if(indexImg < 1) {
indexImg = indexMax;
}
change ();
});
});
стили
.slider_wrap {
width:150px;
height:150px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
width:100px;
height:auto;
display:none;
position:absolute;
top:0; margin: 10px;
left:20px;
}
.slider_wrap img:first-child {
display:block;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(/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;
}
Простой
