jQueryに基づく左右スクロールおよび自動スクロール効果を制御できるコード

左右のスクロールと自動スクロールを制御するサンプルを共有し、昨夜2時間以上かかり、悍蚊の刺され、汗の侵襲、一行の叩く血と汗のコードに耐えた.ハハ.
スクロールバージョンDEMOの自動スクロールバージョンDEMOをクリックすると、ソースコードに詳細なコメントが表示されます.
考え方:
クリックスクロールモードでは、クリック(前後/数字)にclickイベントを追加する、表示ブロックleft値を制御することで切り替えを実現する.
1.前(左):最初のレイアウトで最後のページにスクロールします.そうしないと、left値を加算し、前にスクロールします.
2.後ろ(右):最後のレイアウトで最初のページにスクロールします.そうしないと、left値を減らし、後ろにスクロールします.
3.数字クリック:index(…)を利用して、現在クリックする数字リストのインデックス値を取得し、インデックス値が倍数で周辺幅の負の値となる.切り替えが可能です.
コアコード:

 
  
//@Mr.Think***     
  
$pre.click(function(){ 
  
if (!$showbox.is(':animated')) { //          
  
if ($cur == 1) { //       ,             
  
$showbox.animate({ 
  
left: '-=' + $w * ($pages - 1) 
  
}, 500); //  left ,      ,500(ms)     ,   
  
$cur = $pages; //             
  
} 
  
else { 
  
$showbox.animate({ 
  
left: '+=' + $w 
  
}, 500); //  left ,       
  
$cur--; //     
  
} 
  
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //              ,             
  
} 
  
}); 
  
//@Mr.Think***     
  
$next.click(function(){ 
  
if (!$showbox.is(':animated')) { //          
  
if ($cur == $pages) { //        ,            
  
$showbox.animate({ 
  
left: 0 
  
}, 500); //  left ,      ,500(ms)     ,   
  
$cur = 1; //            
  
} 
  
else { 
  
$showbox.animate({ 
  
left: '-=' + $w 
  
}, 500);//  left ,       
  
$cur++; //      
  
} 
  
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //              ,             
  
} 
  
}); 
  
//@Mr.Think***       
  
$num.click(function(){ 
  
if (!$showbox.is(':animated')) { //          
  
var $index = $num.index(this); //                
  
$showbox.animate({ 
  
left: '-' + ($w * $index) 
  
}, 500); //  left ,      ,500(ms)      
  
$cur = $index + 1; //      ,              ,      ,     .index()    0   ,  1 
  
$(this).addClass('numcur').siblings().removeClass('numcur'); //           ,             
  
} 
  
}); 
  
 
 

自動スクロールモードは、クリックスクロールモードに基づいて強化するものであり、自動スクロールイベントが追加されたことや、マウスがストロークするときにアニメーションイベントがクリアすることにほかならない.
ここで少し説明します.DEMOプレゼンテーションでは、マウスをなぞる際のクリアアニメーションイベントが、前後/数字/領域に追加されている.しかし、あなたのページでは、アニメーションイベントをクリアする必要があるいくつかの領域が同じ領域にある場合、trigger(...)シミュレーションで自動スクロールを実現することができます.
また、自動スクロールではsettimeout(「fun」,interval)で実現する、setInterval(「fun」,interval)で実現しない.なぜなら、setIntervalは、間隔時間後に入力を繰り返す関数である、setTimeoutは、間隔時間後に1回のみ関数入力関数を実行することで、2回目のマウスが停止するアニメーション領域に切り込まれたときにアニメーションをクリアすることができないからである.
コアコード:

 
  
...... 
  
//@Mr.Think***       
  
autoSlide(); 
  
...... 
  
//@Mr.Think***     
  
clearFun($showbox); 
  
clearFun($pre); 
  
clearFun($next); 
  
clearFun($num); 
  
//@Mr.Think***            
  
function clearFun(elem){ 
  
elem.hover(function(){ 
  
clearAuto(); 
  
}, function(){ 
  
autoSlide(); 
  
}); 
  
} 
  
//@Mr.Think***     
  
function autoSlide(){ 
  
$next.trigger('click'); 
  
$autoFun = setTimeout(autoSlide, 3000);//      setInterval,setInterval         ,               
  
} 
  
//@Mr.Think***       
  
function clearAuto(){ 
  
clearTimeout($autoFun); 
  
} 
  
 
 

より詳細なコード分析は、ソースコードを表示し、詳細なコメントを書いてください.
コードパッケージのダウンロード