Home>
When you click the right, it moves in order, but when you click the left, it cannot be displayed in order.
If there is a part that needs improvement in the current description, I would like you to point out.
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
Related articles
- button click in javascript (jquery) does not respond
- jQuery Click Get Captcha Button and Countdown Function
- how to click only when a specific button is present in python scraping
- iOS implements irregular Button click effect example code
- Python Tkinter click button trigger event example
- Java click button event popup child window
- Python PyQt5/Pyside2 button right click menu example code
- layui data table click the paging button instance to listen to events
- layui uses the button button to click the pop-up layer instance that loads the form in the pop-up layer
- layui click reset button, select is not reset
- Jquery dynamically add elements and add click events to achieve process analysis
- layui click the button the page will automatically refresh the solution
- Image click zoom function case implemented by jQuery
- vue click button to dynamically create and delete component functions
- PHP implements a button click to upload multiple pictures operation example
- Python simulation click webpage button implementation method
- Python button click to close window implementation
- Method analysis of jQuery implementation click to scroll to the specified element
- jquery - i want to close when i click the hamburger menu
- net framework - about button click event and text box display
Trends
I think that it falls under the question "Circle throwing questions such as please give me code/debug" that I haven't recommended on this site. Because it has been.
Line 7 of
function slide (way)
is
Isn't it a mistake of?