I shared an example of controlling the scroll of the left and right sides and automatically rolling. It took more than two hours last night to endure the bite and sweat of the sick, and a line of hard-earned code. Haha.
Two modes are encapsulated: Click the rolling version DEMO to automatically scroll the version DEMO. The Source Code contains detailed notes.
Ideas:
In the click-scroll mode, a click event is added for the click (forward/backward/number), and switching is achieved by controlling the left value of the display area.
1. Forward (left): when you are on the first page, scroll to the last page. Otherwise, accumulate the left value and scroll forward;
2. backward (right): scroll to the first page when the last page is displayed. Otherwise, the left value is subtracted and the page is rolled back;
3. Click a number: use index (...) Obtain the index value of the currently clicked number list, and the index value is a multiple of the negative value of the peripheral width to achieve the switch.
Core code:
Copy codeThe Code is as follows: // @ Mr. Think *** scroll forward
$ Pre. click (function (){
If (! $ Showbox. is (': animated') {// determines whether the display area is animated.
If ($ cur = 1) {// scroll forward to the last page when the first page is displayed.
$ Showbox. animate ({
Left: '-=' + $ w * ($ pages-1)
}, 500); // change the left value, switch the display layout, 500 (MS) for the scroll time, the same below
$ Cur = $ pages; // initialize the last Layout
}
Else {
$ Showbox. animate ({
Left: '+ =' + $ w
}, 500); // change the left value and switch the display Layout
$ Cur --; // layout reduction
}
$ Num. eq ($ cur-1 ). addClass ('numcur '). siblings (). removeClass ('numcur'); // Add a highlighted style to the corresponding layout number and remove the highlighted style of the same level element.
}
});
// @ Mr. Think *** scroll backward
$ Next. click (function (){
If (! $ Showbox. is (': animated') {// determines whether the display area is animated.
If ($ cur = $ pages) {// scroll back to the first layout in the last Layout
$ Showbox. animate ({
Left: 0
}, 500); // change the left value, switch the display layout, 500 (MS) for the scroll time, the same below
$ Cur = 1; // initialize the layout as the first Layout
}
Else {
$ Showbox. animate ({
Left: '-=' + $ w
}, 500); // change the left value and switch the display Layout
$ Cur ++; // the total number of pages
}
$ Num. eq ($ cur-1 ). addClass ('numcur '). siblings (). removeClass ('numcur'); // Add a highlighted style to the corresponding layout number and remove the highlighted style of the same level element.
}
});
// @ Mr. Think *** number Click Event
$ Num. click (function (){
If (! $ Showbox. is (': animated') {// determines 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 the left value, switch the display layout, 500 (MS) is the scroll time
$ Cur = $ index + 1; // initialize the layout value. When this sentence is rolled to the third edition, click the backward button to display the blank version. the index () value starts from 0, so 1 is added.
$ (This). addClass ('numcur'). siblings (). removeClass ('numcur'); // Add a highlighted style to the current click and remove the highlighted style of the same level element
}
});
The auto-scroll mode is enhanced based on the click-scroll mode. It is nothing more than adding an auto-scroll event and clearing an animation event when you move the mouse over it.
Here, I want to explain a little. in the DEMO, clear animation events are added for forward, backward, numeric, and area when the mouse is crossed. however, if the animation events to be cleared are all in the same region on your page, you can use trigger (...) Automatically scroll through the simulation.
Another point is that setTimeout ("fun", interval) is used for automatic scrolling, instead of setInterval ("fun", interval. the reason is that setInterval repeats the input function after the interval, while setTimeout only executes the evaluate function after the interval to pass in the function, in this way, the animation cannot be cleared when you move the mouse to the animation stop area for the second time.
Core code:Copy codeThe Code is as follows :......
// @ Mr. Think *** call auto-scroll
AutoSlide ();
......
// @ Mr. Think *** stop rolling
ClearFun ($ showbox );
ClearFun ($ pre );
ClearFun ($ next );
ClearFun ($ num );
// @ Mr. Think *** stop auto scroll when the event is inserted
Function clearFun (elem ){
Elem. hover (function (){
ClearAuto ();
}, Function (){
AutoSlide ();
});
}
// @ Mr. Think *** auto scroll
Function autoSlide (){
$ Next. trigger ('click ');
$ AutoFun = setTimeout (autoSlide, 3000); // setInterval cannot be used here, And setInterval is used to repeatedly execute the input function, which causes the failure to stop the second input.
}
// @ Mr. Think *** clear Auto scroll
Function clearAuto (){
ClearTimeout ($ autoFun );
}
For more detailed code analysis, see the source code and write detailed comments.
Package and download code
