How to make the js code smaller so that each button performs only its functions?

V

Vladimir2015-11-02 23:03:27

css

Vladimir, 2015-11-02 23:03:27

It is necessary to reduce the js code so that each button is responsible for the action of the current window, but at the same time the code is shorter and does not repeat

Here is the html code

<!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>

here is 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 ();
  });	
});

styles

.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;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

T

Tema, 2015-11-03
@vova_kondrashov

Didn't get into how it works. I would shorten the code like this:

$(function() {
    $('[id^="slider"]').each(function() {
        var elWrap = $(this),
            el =  elWrap.find('img'),
            indexImg = 1,
            indexMax = el.length,
            phase = 3000;

        elWrap.append('<span class="next"></span><span class="prev"></span>');
        
        var   btnNext = elWrap.find('span.next'),
                btnPrev = elWrap.find('span.prev');

        btnNext.click(function() {
            indexImg++;
            if(indexImg > indexMax) {
                indexImg = 1;
            }
            change (el, indexImg);
        });
        
        btnPrev.click(function() {
            indexImg--;
            if(indexImg < 1) {
                indexImg = indexMax;
            }
            change (el, indexImg);
        });
    });
});

function change ($img, indexImg) {
    $img.fadeOut(0);
    $img.filter(':nth-child('+indexImg+')').fadeIn(0);
}