Home>
I would like you to point out any parts of the current description that need improvement.
I want to solve the problem with the current description.
Thank you.
<! 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">
"use strict";
$(function () {
function slider (target) {
var box = $('. slider-area');// Stores the selector enclosing the image to slide
var prevBtn = $('. slider-ctrl-btn.prev');// Variable that stores the selector of the prev button
var nextBtn = $('. slider-ctrl-btn.next');// variable that stores the selector of the prev button
var w = 0;// Slideshow width
var h = 0;// slideshow height
var imgW;// Width of the slide image
var imgH;// height of image to slide
var items = [];// array containing slide image selectors
var srcList = [];// Array to store image reference
var loadIndex = 0;// Index the loaded image
// Duplicate slide element
function clone (selector) {
var cloneSelector = selector.clone (true);
$(cloneSelector) .attr ({
'href': selector.attr ('href'),
'target': selector.attr ('target')
});
return cloneSelector;
};
// slide
function slide (way) {
removeEvent ();
var i;
var cloneSelector;
// Processing executed when the next button is clicked
if (way<0) {
cloneSelector = clone (items [0]);
$(cloneSelector) .css ('left', (w * items.length + 1) + 'px');
box.find ('ul'). append (cloneSelector);
items.push ($(cloneSelector));
for (i = 0;i<items.length;i ++) {
items [i] .animate ({'left': (w * i) -w},
500);
};// Processing executed when prev button is clicked
} else {
cloneSelector = clone (items [items.length-1]);
$(cloneSelector) .css ('left', (w * -1) + 'px');
box.find ('ul'). append (cloneSelector);
items.unshift ($(cloneSelector));
for (i = 0;i<items.length;i ++) {
items [i] .animate ({'left': w * i},
500);
};
};
setTimeout (function () {
slideComplete (way);
},
500);
};
// slide completed
function slideComplete (way) {
// next
if (way<0) {
items [0] .remove ();
items.shift ();
}
// prev
else {
items [items.length-1] .remove ();
items.pop ();
};
addEvent ();
};
// Event settings
function addEvent () {
prevBtn.on ({
'click': function () {
slide (1);
}
});
nextBtn.on ({
'click': function () {
slide (-1);
}
});
};
// delete event
function removeEvent () {
prevBtn.off ('click');
nextBtn.off ('click');
};
// Positioning
function pos () {
$.each (items, function (index) {
$(this) .css ('left', (w * index) + 'px');
});
};
// resize
function resize () {
w = target.parent (). width ();
h = Math.floor (w * imgH/imgW);
target.width (w) .height (h);
box.find ('ul'). width (w) .height (h);
pos ();
};
// setup
function setup () {
imgW = box.find ('img'). width ();
imgH = box.find ('img'). height ();
box.find ('li'). each (function (index) {items [index] = $(this);
});
$(window) .on ('resize', resize);
resize ();
addEvent ();
};
// Image loading complete
function loaded () {
if (loadIndex! = (srcList.length-1)) {
loadIndex ++;
imgLoad ();
} else {
setup ();
};
};
// Load image
function imgLoad () {
var img = new Image ();
$(img) .on ('load', loaded) .attr ('src', srcList [loadIndex]);
};
// Initial setting
function init () {
box.find ('img'). each (function (index) {
srcList [index] = $(this) .attr ('src');
});
imgLoad ();
};
init ();
};
slider ($('. slider-area'));
});
</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
-
Answer # 2
I think the lead to addEvent () is not connected properly.
Follow the reverse from addEvent () and see where the call stops.
Related articles
- i want to put out a slide that i can reply to by clicking it like youtube with jquery
- jquery mouseover navigation underline slide out effect
- The jQuery code implements the menu with the upper right corner of the dialog box closed ×
- jquery achieve left and right seamless carousel
- Focus map effect of left and right movement with jQuery
- Use jQuery to achieve mouse click left and right button sliding switch
- The cool apple style icon implemented by jQuery slide out menu effect code
- jQuery implementation of the left and right drag function of the divider
- Carousel of left and right pictures based on jQuery (general principle)
- Android custom View slide left and right to choose birth year
- jquery achieve left and right carousel effect
- Example of jquery implementation of sidebar left and right scaling effect
- jquery - the navigation value of the slide cannot be obtained
- jquery achieve left and right carousel switching effect
- Android use Photoview to achieve left and right slide and zoom
- JS and jQuery implement ListBox up, down, left, right operation example
- JQuery simulation to achieve the right mouse button menu function in the web page
- JS implement mouse drag div to slide left and right
- jquery - i want to move the slide like the site of https://infcuriondigital/
- regarding the implementation of a slide show using jquery on the website
Trends
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- python - you may need to restart the kernel to use updated packages error
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- python 3x - typeerror: 'method' object is not subscriptable
- javascript - how to check if an element exists in puppeteer
- xcode - pod install [!] no `podfile 'found in the project directory
- i want to call a child component method from a parent in vuejs
- vuejs - [vuetify] unable to locate target [data-app] i want to unit test to avoid warning
Incorrect selector specification
$(. Specified class 1.specified class 2)
Look at prevBtn in console.log and see if you have specified the prev button etc. with the mouse in the console part
var prevBtn = $('. slider-ctrl-btn.prev');// variable that stores the selector of the prev button
var nextBtn = $('. slider-ctrl-btn.next');// A variable that stores a selector for the prev button