Home>

[jquery question] how can i implement a slide show using function scope?

I want to implement a slideshow using function scope (local variables) instead of global variables.

var pages = [],
        num = 0,
        pagesNum = 0;


If i make the above three lines globally declared variables, you can work, but if you confine them locally like index.html below, you will get the following error.

Uncaught TypeError: pages.push is not a function
    at slide (index.html: 49)
    at HTMLButtonElement.  (index.html: 58)
    at HTMLButtonElement.dispatch (jquery.js: 3058)
    at HTMLButtonElement.eventHandle (jquery.js: 2676)
slide @ index.html: 49
(anonymous) @ index.html: 58
dispatch @ jquery.js: 3058
[email protected]: 2676


I would be very happy if you could tell me what code to write.
This is a article .
Below are the index.html and style.css that I wrote.
If i don't use global variables, I would be very happy if you could advise me to write code like this:

<! 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/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">
"use strict";
$(function () {
  (function () {
    var pages = [],
        num = 0,
        pagesNum = 0;
  }) ();
  function slide (pages, num, pagesNum) {
    for (var i = 0;i<$('. slider-list li'). length;i ++) {
      if (i == 0) {
        pages.push (0);
      } else {
        num + =-$('. slider-list li'). eq (i) .width ();
        pages.push (num);
      }
    }
  }
  $('. slider-ctrl-btn'). on ('click', function () {
    slide (pages, num, pagesNum);
    if ($(this) .data ('ctrl') === 'next') {
      var step = 1;
      pagesNum = pagesNum + step;
    if (pagesNum === pages.length) {
      pagesNum = 0;
    }
    $(". slider-list"). animate ({left: pages [pagesNum]}, 500)}
    else if ($(this) .data ('ctrl') === 'prev') {
      var back = -1;
      pagesNum = pagesNum + back;
    if (pagesNum === -1) {
      pagesNum = pages.length-1;
    }
      $(". slider-list"). animate ({left: pages [pagesNum]}, 500)}
  });
});
</script>
</body>
</html>

style.css

.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;}
Code
jquery function slider scope
  • Answer # 1 

    // This is not the global scope but the local scope of $(function () {});
  / * Delete * // * (function () {* /
    var pages = [],
        num = 0,
        pagesNum = 0;
  / * Delete * // *}) ();*/

    [Summary of JavaScript scope-Scope types and basics | CodeGrid]
    https://app.codegrid.net/entry/2017-js-scope-1

Related articles