8

基本的に巨大なコンテンツ スライダーである Web サイトを作成したいと考えています。ページの読み込み時に div 1 (基本的には画面全体) が表示され、下矢印をクリックしてページ 2 などに移動できます。ページ 2 に到達すると、Iまた、左右に移動できるようにしたい場合 (2 ページのみ)、画像スライダーと考えてください。ただし、div があります。

利用可能なプラグインがあることは知っていますが、自分で書くのはかなり好きです。機能する（基本的な）JQueryをいくつか書きましたが、肥大化しすぎているようで、より良い/より効率的な方法が必要でした..私が求めているものこれにアプローチする最良の方法は次のとおりです。学習して改善したいのでコードを探していませんが、これに取り組む最良の方法が思いつきません。ある種のスイッチステートメントを使用することは可能ですか? どのようにそれを行うつもりですか？

また、div の数を超えてスクロールできないようにする方法も必要です。現在、if ステートメントで var を使用していますが、全員を単純な関数に結合する方法が必要だと感じていますか?

JS は以下にあり、JSFiddle もあります

ありがとう！

http://jsfiddle.net/W4SVz/

$(function () {
  var box = $('.box');
  TriggerClick = 0;

  $("#down").click(function(){
     var height = $('.box').outerHeight();

     if(TriggerClick == 0){
         TriggerClick = 1;
         $(box).stop().animate({top:'-='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 2;
         $(box).stop().animate({top:'-='+height}, 500);
     }
  });

   $("#up").click(function(){
     var height = $('.box').outerHeight();

     if(TriggerClick == 2){
         TriggerClick = 1;
         $(box).stop().animate({top:'+='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 0;
         $(box).stop().animate({top:'+='+height}, 500);
     }
  });

  $("#left").click(function(){
     var height = $('.box').outerHeight();
     if(TriggerClick == 1){
         $(box).stop().animate({left:'-='+height}, 500);
     }
  });

   $("#right").click(function(){
     var height = $('.box').outerHeight();
     if(TriggerClick == 1){
         $(box).stop().animate({left:'+='+height}, 500);
     }
  });

});
4

2 に答える 2

1

免責事項として、実際に使用するために自分で作成することはお勧めできません。異なるブラウザーで多くの互換性の問題が発生する可能性があります。

しかし、研究目的のために、私の小さな知識をあなたと共有できてうれしいです.

Kelvin Luck の jquery プラグイン jscrollpane を頻繁に使用しました。軽量で構成可能なプラグインです。私の意見では、それはあなたにとっても興味深い研究になるでしょう。ここでコードを見つけることができます：http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

ここでは、このプラグインの非常に簡単な使用法を示します。あなたも見てみたいと思うかもしれません http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

私の知る限り、jquery イベント システムを強力に使用しています。自由に理解してください...そしておそらくそれを改善してください;-)

楽しむ ！

于 2013-04-11T21:23:06.517 に答える
1

コードに関して言えば、4 つのケースすべて (上下左右) に共通するものを見つけ出し、それを抽象化してください。TriggerClick 変数はあまり直感的ではないと思います。必要かどうかはわかりません。

プラグイン パターンを使用して関数を jQuery に追加し (Brainfeeders リンクを参照)、ページの読み込みでその関数を使用します。

私はアイデアをいじりましたが、コードを投稿するつもりはありません。興味がある場合は大声で言ってください。

于 2013-04-19T16:32:36.237 に答える