Share a sample that controls left and right scrolling and automatic scrolling, last night spent two hours, enduring the bite of the mosquito, the sweat of the attack, a line of the sweat code. Ha ha.
Encapsulation of two modes: Click on the rolling version of the demo automatic scrolling version of the demo, the source code has detailed comments.
Ideas:
Click on the scrolling mode, to click (Forward/backward/digital) to add click events, by controlling the display block left value to achieve switching.
1. Forward (left): When in the first layout, scroll to the last page, otherwise, add left value, roll forward;
2. Back (right): When in the last layout, scroll to the first page, otherwise, the tired left value, scrolling backward;
3. Digital clicks: Use Index (...) Gets the index value that is currently clicked in the list of numbers, and the index value is a multiple of the perimeter width negative. You can reach the switch.
Core code:
Copy Code code as follows:
@Mr. think*** Roll Forward
$pre. Click (function () {
if (! $showbox. Is (': Animated ')) {//Determine whether the display area is animated
if ($cur = = 1) {//In the first layout, scroll forward to the last page
$showbox. Animate ({
Left: ' = ' + $w * ($pages-1)
}, 500); Change left value, toggle display layout, (ms) for scrolling time, below
$cur = $pages; Initialize the last page of the layout
}
else {
$showbox. Animate ({
Left: ' + = ' + $w
}, 500); Change left value, toggle display layout
$cur--; Page tired
}
$num. EQ ($cur-1). addclass (' Numcur '). Siblings (). Removeclass (' numcur '); Adds a highlight style to the corresponding layout number and removes the highlight style for the sibling element
}
});
@Mr. think*** Scroll Backward
$next. Click (function () {
if (! $showbox. Is (': Animated ')) {//Determine whether the display area is animated
if ($cur = = $pages) {//In the last layout, scroll back to the first page
$showbox. Animate ({
left:0
}, 500); Change left value, toggle display layout, (ms) for scrolling time, below
$cur = 1; Initialize the layout to the first layout
}
else {
$showbox. Animate ({
Left: ' = ' + $w
}, 500)//change left value, toggle display layout
$cur + +; Add number of pages
}
$num. EQ ($cur-1). addclass (' Numcur '). Siblings (). Removeclass (' numcur '); Adds a highlight style to the corresponding layout number and removes the highlight style for the sibling element
}
});
@Mr. think*** Digital Click event
$num. Click (function () {
if (! $showbox. Is (': Animated ')) {//Determine whether the display area is animated
var $index = $num. Index (this); Index the position value of the current click in the list
$showbox. Animate ({
Left: '-' + ($W * $index)
}, 500); Change left value, toggle display layout, (ms) for scrolling time
$cur = $index + 1; Initialize the layout value, this sentence avoids when scrolling to the third edition, clicks the backward button, comes out the blank edition. Index () value is from 0, so add 1
$ (this). addclass (' Numcur '). Siblings (). Removeclass (' numcur '); Adds a highlight style to the current click and removes the highlight style for the sibling element
}
});
Automatic scrolling mode is enhanced by clicking on the scrolling mode, adding an automatic scrolling event and clearing the animation event when the mouse is zoned.
Here's a little bit to explain. In the demo demo, you added a purge animation event for forward/backward/digital/range. However, if your page, these several need to add clear animation events are in the same area, completely can use trigger (...) The simulation implements automatic scrolling.
Also, automatic scrolling is implemented using settimeout ("Fun", interval) instead of setinterval ("fun", interval). The reason is that setinterval repeats the incoming function after the interval, and settimeout only performs a function pass through the function once after the interval, so that the animation cannot be cleared when the second mouse stroke stops the animation area.
Core code:
Copy Code code as follows:
......
@Mr. think*** Call Automatic scrolling
Autoslide ();
......
@Mr. think*** Stop Scrolling
Clearfun ($showbox);
Clearfun ($pre);
Clearfun ($next);
Clearfun ($num);
@Mr. think*** Event Stops automatic scrolling
function Clearfun (elem) {
Elem.hover (function () {
Clearauto ();
}, function () {
Autoslide ();
});
}
@Mr. think*** Automatic scrolling
function Autoslide () {
$next. Trigger (' click ');
$autoFun = settimeout (autoslide, 3000)//Not available here Setinterval,setinterval is repeated execution of the incoming function, which causes the second stroke to cease to expire
}
@Mr. think*** Clear Automatic scrolling
function Clearauto () {
Cleartimeout ($autoFun);
}
More detailed code analysis, please check the source, write a detailed comment.
Code package download
