Code based on jQuery that can control left and right scrolling and automatic scrolling effects_jquery

Share an example of controlling left and right scrolling and automatic scrolling. I spent more than two hours last night, enduring the bites of mosquitoes, the invasion of sweat, and typing out the hard-earned code line by line. Haha.
Encapsulates two kinds of Mode: Click scrolling version DEMO Auto-scrolling version DEMO, with detailed comments in the source code.
Idea:
In click scrolling mode, it is click (forward/towards (after/number), add a click event, and switch by controlling the left value of the display block.
1. Forward (left): When in the first page, scroll to the last page, otherwise, accumulate the left value and move toward Scroll forward;
2. Backward (right): When in the last page, scroll to the first page, otherwise, decrease the left value and scroll backward;
3. Digital click: use index ( …) Get the index value of the current click in the number list, and then the index value is a multiple of the negative value of the peripheral width. Switching can be achieved.
Core code:

Copy the code The code is as follows:

//@Mr.Think***Scroll forward
$pre.click(function(){
if (!$showbox.is(':animated')) { //Determine whether the display area is animated
if ($cur == 1) { //On the first page, scroll forward to the last one Layout
$showbox.animate({
left: '-=' $w * ($pages - 1)
}, 500); //Change left value, switch display layout, 500(ms) is the scrolling time, the same below
$cur = $pages; //Initialize the layout to the last layout
}
else {
$showbox.animate({
left: ' =' $ w
}, 500); //Change the left value and switch the display layout
$cur--; //The layout is reduced
}
$num.eq($cur - 1).addClass ('numcur').siblings().removeClass('numcur'); //Add a highlighting style to the corresponding layout number, and remove the highlighting style of the same level element
}
});
//@Mr.Think***Scroll backward
$next.click(function(){
if (!$showbox.is(':animated')) { //Judge the display area Whether to animate
if ($cur == $pages) { //When in the last page, scroll backward to the first page
$showbox.animate({
left: 0
}, 500); //Change the left value, switch the display layout, 500 (ms) is the scrolling time, the same below
$cur = 1; //Initialize the layout to the first layout
}
else {
$showbox.animate({
left: '-=' $w
}, 500);//Change the left value and switch the display layout
$cur; //The number of layouts is accumulated
}
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //Add a highlight style to the corresponding layout number and move it Except for highlight styles of sibling elements
}
});
//@Mr.Think***Number 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 the left value, switch the display layout, 500 (ms) is the scrolling time
$ cur = $index 1; //Initialize the page value. This sentence can avoid clicking the back button when scrolling to the third page to display a blank page. The value of index() starts from 0, so add 1
$(this).addClass('numcur').siblings().removeClass('numcur'); //Add a highlighting style to the current click and remove the highlighting style of the same level element
}
});

The automatic scrolling mode is enhanced based on the click scrolling mode. It is nothing more than adding automatic scrolling events and clearing animation events when the mouse is stroked.
One thing to note here. In the DEMO demonstration, clear animation events are added for forward/backward/number/area when the mouse moves over. However, if you have a page, these clear animation events that need to be added are all in the same area. Within, you can completely use trigger(…) to simulate automatic scrolling.
Another point is that automatic scrolling is implemented with setTimeout(“fun”,interval) instead of setInterval(“fun”,interval). The reason is that , setInterval repeatedly executes the passed-in function after the interval, while setTimeout only executes the passed-in function once after the interval, thus preventing the animation from being cleared when the mouse moves into the stop animation area for the second time.
Core Code:

Copy code The code is as follows:

......
/ /@Mr.Think***Call automatic scrolling
autoSlide();
......
//@Mr.Think***Stop scrolling
clearFun($showbox);
clearFun($pre);
clearFun($next);
clearFun($num);
//@Mr.Think***Stop automatic scrolling when the event is drawn in
function clearFun(elem){
elem.hover(function(){
clearAuto();
}, function(){
autoSlide();
});
}
//@Mr.Think***Auto scroll
function autoSlide(){
$next.trigger('click');
$autoFun = setTimeout(autoSlide, 3000);//This setInterval cannot be used here. setInterval is to repeatedly execute the incoming function, which will cause the stop to fail when the second stroke is made
}
//@Mr.Think*** Clear automatic scrolling
function clearAuto() {
clearTimeout($autoFun);
}

For more detailed code analysis, please view the source code with detailed comments.
Code package download