1

現時点では、 のスライダーを作成する必要があり<div>ます。しかし、ほとんどのプラグインはサイズが大きいため、基本的なものしか必要ないため、独自の jquery スクリプトを作成しようとしています。しかし、正直なところ、私は jQuery の初心者であり、助けが必要です。

現時点では、右から左 (幅 2500px) に移動する必要がある別の<div>コンテナ (overflow:hidden幅 250px)<div>を取得しました。<div>関数のその div$(document).readyを、左に 250px のステップで 5 秒間隔でアニメーション化する必要があります。しかし、午前中をどこから始めるべきかを理解しようとして過ごした後、私はまだ立ち往生しています。

さらに、次のオプションが必要です。

  1. 内側<div>が完全に左に移動した後、元の位置にフェードバックします。
  2. 特定の位置に移動するための「ドット」を作成する方法。その位置に移動すると、スライドはその位置からアニメーションを開始します。

これが大きな (難しい?) 質問であることは承知していますが、少しでもお役に立てば幸いです。

4

3 に答える 3

3

あなたの要件に合った私が作成したデモは次のとおりです: little link。jQuery/JavaScript は参照用に完全にコメントされていますが、追加の詳細が必要な部分があれば、喜んで詳しく説明します。

于 2012-09-04T11:06:15.627 に答える
1

JSFiddle を正しいプログラムで更新しました

フィドルのデモ

于 2012-09-04T11:03:40.340 に答える
1

jsBin デモ

HTML:

<div id="slider">    
  <div id="slider_cont">
    <div id="slide">
       <!-- wide content here -->
    </div>    
  </div>  
  <div id="dots"><!--leave empty--></div> 
</div>

CSS:

#slider_cont{
  width:250px;
  height:180px;
  position:relative;
  background:#eee;
  overflow:hidden;
}
#slide{
  position:absolute;
  left:0;
  width:2500px;
  height:180px;
}
.dot{
  cursor:pointer;
  background:#444;
  width:10px;
  height:10px;
  margin:4px 2px;
  position:relative;
  float:left;
  border-radius:10px;
}
.dot.active{
  background:#49a;
}

jQuery:

var steps = 10,  // SET DESIRED n OF STEPS
    delay = 3500,// SET DESIRED DELAY
    galW = $('#slider_cont').width(),
    c = 0,      // counter
    intv;       // interval

// generate dots
for(i=0;i<steps;i++){
 $('#dots').append('<div class="dot" />'); 
}
$('#dots .dot').eq(c).addClass('active');

// ANIMATIONS function
function anim(){
  c=c%steps; // reset counter to '0' if greater than steps
  $('#slide').stop().animate({left: '-'+galW*c},800);
  $('#dots .dot').removeClass('active').eq(c).addClass('active');
}

// AUTO SLIDE function
function auto(){
  intv = setInterval(function(){
    c++; anim();
  },delay);
}
auto(); // kick auto slide

// PAUSE slider on mouseenter
$('#slider').on('mouseenter mouseleave',function(e){
  var evt = e.type=='mouseenter'? clearInterval(intv) : auto();
});

// CLICK dots to animate
$('#dots').on('click','.dot',function(){
  c=$(this).index(); anim();
});

コードによくコメントしたことを願っています。質問があれば聞いてください

于 2012-09-04T11:27:53.540 に答える