Home>

I want to implement a slide show using encapsulation in order to put local variables (var current = 0;and var num = 0;) without defining variables in the global function. (If i declare a variable in a local function, we received advice that you could implement it using encapsulation.)
I tried to write using encapsulation, but I didn't know where to fix it.

Current error

Now the error is displayed if slideNext and slidePrev are not defined in the console.

Errored html and css files
<! doctype html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<meta name = "format-detection" content = "telephone = no">
<title></title>
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/base.css">
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>

    
        
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <button type = "button" data-ctrl = "prev"></button>
            <button type = "button" data-ctrl = "next"></button>
        
    

<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript">
/ **
  * (Description)
  * @type {number} current ← Initial value when clicked
  * @type {number} num ← Variable that puts the width number after getting the element width
  * @type {string} numLength ← Number of elements for acquiring image position information
  * @type {number} numWidth ← element width
  *
  *
** /
$(function () {
  $('. next'). on ('click', function () {
    slideNext ();
  });
  $('. prev'). on ('click', function () {
    slidePrev ();
  });
  function slider () {
    var current = 0;
    var num = 0;
    function slideNext () {
      var numWidth = $('. slider-list img'). eq (current) .width ();
      var numLength = $('. slider-list img'). length;
      current ++;
      if (current<numLength) {
        num- = numWidth;
      } else {
        num = 0;
        current = 0;
      }
      $('. slider-list'). animate ({left: num});
    }
    return slideNext;
    function slidePrev () {
      var numWidth = $('. slider-list img'). eq (current) .width ();
      var numLength = $('. slider-list img'). length;
      current--;
      if (current>= 0) {
        num + = numWidth;
      } else {
        num =-$('. slider-list img: not (: last)'). map (function () {
          return $(this) .width ();
        }). get (). reduce ((x, y) =>x + y);
        current = numLength-1;
      }
      $('. slider-list'). animate ({left: num});
    }
    return slidePrev;
  }
});
</script>
</body>
</html>
. slider-wrap {
    width: 600px;
    padding: 10px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #DDD;
    box-shadow: 0 2px 5px rgba (50, 50, 50, 0.4);
}
.slider-area {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: #FFF;
    overflow: hidden;
}
.slider-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    height: 300px;
}
.slider-list>li {float: left;}
.slider-ctrl-btn {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    cursor: pointer;
    border-radius: 15px;
    background-color: rgba (255, 255, 255, 0.5);
}
.slider-ctrl-btn.prev {left: 30px;}
.slider-ctrl-btn.next {right: 30px;}
  • Answer # 1

    $(function () {
      var current = 0;
      var num = 0;
      function slideNext () {
    // ...
      }
      function slidePrev () {
    // ...
      }
      $('. next'). on ('click', function () {
        slideNext ();
      });
      $('. prev'). on ('click', function () {
        slidePrev ();
      });
    });


    I think this is okay. Variables declared withvarin$(function () {})are local variables because closures are created.

  • Answer # 2

    Do you want to use global variables?
    (Who wrote this terrible source! ... I am)

    Try adding a current class because it looks like jQuery

    $(function () {
      $('. slider-list img: first'). addClass ('current');
      $('. next, .prev'). on ('click', function () {
        var current = $('. slider-list img.current');
        var idx = $('. slider-list img'). index (current);
        idx + = $(this) .is ('. next')? 1: -1
        if (idx>= $('. slider-list img'). length) idx = 0;
        if (idx<0) idx = $('. slider-list img'). length-1;
        current.removeClass ('current');
        $('. slider-list img'). eq (idx) .addClass ('current');
        var left =-$('. slider-list img: lt (' + idx + ')'). map (function () {
          return $(this) .width ();
        }). get (). concat (0) .reduce ((x, y) =>x + y);
        $('. slider-list'). animate ({left});
      });
    });

Trends