应用jQuery完成左右滚动的操作和自动滚动效果
时间：2023-10-23 12:15:01 闻子
与原生JavaScript相比，对jquery的痴迷是如此的美丽。促使我更加努力地研究原生态JavaScriptt.分享一个操纵左右滚动和自动滚动的示例， 昨晚花了两个多小时， 被悍蚊咬后， 汗液侵袭, 一行行敲出的血汗编码. 嘿嘿.封装有两种形式
与原生JavaScript相比，对jquery的痴迷是如此的美丽。促使我更加努力地研究原生态JavaScriptt.
分享一个操纵左右滚动和自动滚动的示例， 昨晚花了两个多小时， 被悍蚊咬后， 汗液侵袭, 一行行敲出的血汗编码. 嘿嘿.
封装有两种形式： 点击翻转版本号DEMO DEMO自动滚动版本号，源代码包含详细的注释。
构思:
点击翻转模式，点击(前/后/数据)加click，通过调整显示厅left值完成转换。
1.向前(左):例如，在第一个部分，翻转到后一个页面，否则，积累left值，向前翻转；
2.后(右):例如，在最后一个部分，翻转到第一个网页页面，否则，累减left值，向后翻转；
3.数据点：利用index(..)在现阶段点击数字列表中的索引值， 然后索引值倍率为外场总宽负数，可以实现转换。
关键编码:
01 //***向前翻转
02 $pre.click(function(){
03 if (!$showbox.is(':animated')) { ///分辨展厅是否是动漫
04 if ($cur == 1) { //在第一个版块，然后向前翻转到后一个部分
05 $showbox.animate({
06 left: '-=' $w * ($pages - 1)
07 }, 500); ///更改left值，转换表示板块，500(ms)为了翻转时间，相同
08 $cur = $pages; ///复位版块是最后一个版块
09 }
10 else {
11 $showbox.animate({
12 left: ' =' $w
13 }, 500); //改变left值，转换表示板块
14 $cur--; ///版块累减
15 }
16 $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为相应的版块数据加上高亮度风格，清除高亮度风格的平级元素
17 }
18 });
19 //***向后翻转
20 $next.click(function(){
21 if (!$showbox.is(':animated')) { ///分辨展厅是否是动漫
22 if ($cur == $pages) { //当最后一节向后翻转到第一节时，
23 $showbox.animate({
24 left: 0
25 }, 500); ///更改left值，转换表示板块，500(ms)为了翻转时间，相同
26 $cur = 1; ////复位版块是第一个版块
27 }
28 else {
29 $showbox.animate({
30 left: '-=' $w
31 }, 500);//改变left值，转换表示板块
32 $cur ; ///版块数积累
33 }
34 $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为相应的版块数据加上高亮度风格，清除高亮度风格的平级元素
35 }
36 });
37 //***数据js点击事件
38 $num.click(function(){
39 if (!$showbox.is(':animated')) { ///分辨展厅是否是动漫
40 var $index = $num.index(this); ///检索出现阶段点列表中的位置值
41 $showbox.animate({
42 left: '-' ($w * $index)
43 }, 500); ///更改left值，转换表示板块，500(ms)为翻转时长
44 $cur = $index 1; //复位版块值，这句话可以防止翻转到第三版时，点击后面的按钮，出来空缺版.index()选值从0开始，故加1
45 $(this).addClass('numcur').siblings().removeClass('numcur'); //为现在点一下，加上高亮度的款式，清除高亮度风格的平级元素
46 }
47 });
自动滚动模式是基于点击翻转模式加强的，只不过是添加自动滚动的东西，并在鼠标划分时消除动画的东西。
这里需要说明一点.在DEMO演试中，当鼠标经过时，向前/向后/数据/区域都添加了消除动画的东西。然而，如果你的页面上有这些需要添加和消除的动画事件，它们都在同一个区域，你可以使用trigger（…）模拟来完成自动滚动
还有一点，settimeout应该用于自动滚动(”fun”,interval)没有setinterval(”fun”,interval)完成. 主要原因是，setinterval应在间隔后重复传输的函数公式，而settimeout只能在间隔后实现一次函数传输到函数公式，这样就可以防止动画在第二次电脑鼠标划归终止动画区域时被消除。
关键编码:
01 ...
02 //***启动自动滚动
03 autoSlide();
04 ...
05 //***终止翻转
06 clearFun($showbox);
07 clearFun($pre);
08 clearFun($next);
09 clearFun($num);
10 //***事情归归时停止自动滚动
11 function clearFun(elem){
12 elem.hover(function(){
13 clearAuto();
14 }, function(){
15 autoSlide();
16 });
17 }
18 //***自动滚动
19 function autoSlide(){
20 $next.trigger('click');
21 $autoFun = setTimeout(autoSlide, 3000);///这里不能使用setinterval，setinterval重复执行到函数公式，此时造成第二次划归的无效停止
22 }
23 //***消除自动滚动
24 function clearAuto(){
25 clearTimeout($autoFun);
26 }
分享一个操纵左右滚动和自动滚动的示例， 昨晚花了两个多小时， 被悍蚊咬后， 汗液侵袭, 一行行敲出的血汗编码. 嘿嘿.
封装有两种形式： 点击翻转版本号DEMO DEMO自动滚动版本号，源代码包含详细的注释。
构思:
点击翻转模式，点击(前/后/数据)加click，通过调整显示厅left值完成转换。
1.向前(左):例如，在第一个部分，翻转到后一个页面，否则，积累left值，向前翻转；
2.后(右):例如，在最后一个部分，翻转到第一个网页页面，否则，累减left值，向后翻转；
3.数据点：利用index(..)在现阶段点击数字列表中的索引值， 然后索引值倍率为外场总宽负数，可以实现转换。
关键编码:
01 //***向前翻转
02 $pre.click(function(){
03 if (!$showbox.is(':animated')) { ///分辨展厅是否是动漫
04 if ($cur == 1) { //在第一个版块，然后向前翻转到后一个部分
05 $showbox.animate({
06 left: '-=' $w * ($pages - 1)
07 }, 500); ///更改left值，转换表示板块，500(ms)为了翻转时间，相同
08 $cur = $pages; ///复位版块是最后一个版块
09 }
10 else {
11 $showbox.animate({
12 left: ' =' $w
13 }, 500); //改变left值，转换表示板块
14 $cur--; ///版块累减
15 }
16 $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为相应的版块数据加上高亮度风格，清除高亮度风格的平级元素
17 }
18 });
19 //***向后翻转
20 $next.click(function(){
21 if (!$showbox.is(':animated')) { ///分辨展厅是否是动漫
22 if ($cur == $pages) { //当最后一节向后翻转到第一节时，
23 $showbox.animate({
24 left: 0
25 }, 500); ///更改left值，转换表示板块，500(ms)为了翻转时间，相同
26 $cur = 1; ////复位版块是第一个版块
27 }
28 else {
29 $showbox.animate({
30 left: '-=' $w
31 }, 500);//改变left值，转换表示板块
32 $cur ; ///版块数积累
33 }
34 $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为相应的版块数据加上高亮度风格，清除高亮度风格的平级元素
35 }
36 });
37 //***数据js点击事件
38 $num.click(function(){
39 if (!$showbox.is(':animated')) { ///分辨展厅是否是动漫
40 var $index = $num.index(this); ///检索出现阶段点列表中的位置值
41 $showbox.animate({
42 left: '-' ($w * $index)
43 }, 500); ///更改left值，转换表示板块，500(ms)为翻转时长
44 $cur = $index 1; //复位版块值，这句话可以防止翻转到第三版时，点击后面的按钮，出来空缺版.index()选值从0开始，故加1
45 $(this).addClass('numcur').siblings().removeClass('numcur'); //为现在点一下，加上高亮度的款式，清除高亮度风格的平级元素
46 }
47 });
自动滚动模式是基于点击翻转模式加强的，只不过是添加自动滚动的东西，并在鼠标划分时消除动画的东西。
这里需要说明一点.在DEMO演试中，当鼠标经过时，向前/向后/数据/区域都添加了消除动画的东西。然而，如果你的页面上有这些需要添加和消除的动画事件，它们都在同一个区域，你可以使用trigger（…）模拟来完成自动滚动
还有一点，settimeout应该用于自动滚动(”fun”,interval)没有setinterval(”fun”,interval)完成. 主要原因是，setinterval应在间隔后重复传输的函数公式，而settimeout只能在间隔后实现一次函数传输到函数公式，这样就可以防止动画在第二次电脑鼠标划归终止动画区域时被消除。
关键编码:
01 ...
02 //***启动自动滚动
03 autoSlide();
04 ...
05 //***终止翻转
06 clearFun($showbox);
07 clearFun($pre);
08 clearFun($next);
09 clearFun($num);
10 //***事情归归时停止自动滚动
11 function clearFun(elem){
12 elem.hover(function(){
13 clearAuto();
14 }, function(){
15 autoSlide();
16 });
17 }
18 //***自动滚动
19 function autoSlide(){
20 $next.trigger('click');
21 $autoFun = setTimeout(autoSlide, 3000);///这里不能使用setinterval，setinterval重复执行到函数公式，此时造成第二次划归的无效停止
22 }
23 //***消除自动滚动
24 function clearAuto(){
25 clearTimeout($autoFun);
26 }