Home>
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
-
Answer # 1
Related articles
- is there a way to write using in the element selector of jquery?
- [html5] what is the problem with using datalist to implement suggestion function?
- javascript - jquery: how to implement readmorejs in the tab function
- php - how to implement jquery plugin "vegas 2" in wordpress
- i get an error when using jquery in javascript
- c++ simple question is it better not to use using namespace std;
- i want to put out a slide that i can reply to by clicking it like youtube with jquery
- html - accordion using jquery, want to change the parent element of the pressed button
- jquery - the navigation value of the slide cannot be obtained
- javascript - can't implement slide show with slick
- i want to implement a chat function using aws dynamo on unity
- ios - i have a question about using flutter_svg
- unnecessary things do not disappear by using jquery plugin
- cannot send data to php file by ajax communication using jquery in javascript
- i want to display text dynamically using jquery
- i want to implement a login function using nifukura in unity
- html - creating a tab page using jquery
- jquery ui - i don't know how to save when moving data between data lists using sortable
- javascript - i want to get all the values in the html data list using jquery
- add to specific tag using jquery replace
Related questions
- javascript : Swiper Slider Is it possible to disable the slider at certain screen resolutions?
- javascript : Swiper slider with scroll bar and progress bar
- jquery - i want to align images of different sizes vertically and horizontally without cropping or stretching with slick
- i want to display different images of sliders using jquery on my smartphone and pc
- javascript - slideshow does not work with jquery/simple image slider
- jquery - i want to implement slick on a cdn, but the images are lined up vertically
- jquery - i want to know how to specify the image to be displayed with the slick slider
- javascript - i want to install multiple slick sliders with fixed thumbnails on the same page
[Summary of JavaScript scope-Scope types and basics | CodeGrid]
https://app.codegrid.net/entry/2017-js-scope-1