1

「前へ」ボタンと「次へ」ボタンとページングを使用してゼロから作成した jquery コンテンツ スライダーがあります。

「次へ」をクリックするたびに、セレクター要素クラスのクラスが .no2、.no3 などに変更されてから、.no7 に到達するとサイクルが再開されるように、インクリメンタル コードを実装するにはどうすればよいですか?

前のボタンで同じ効果を逆に実現したいのは明らかです。

(視覚的には、「次へ」ボタンをクリックすると dot.png がタイムラインに沿って移動し、ページング効果が作成されます)

.no1{
    background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:8px 53px,left bottom; background-repeat:no-repeat;"}

.no2{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:81px 53px,left bottom ; background-repeat:no-repeat;"}

.no3{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:154px 53px,left bottom ; background-repeat:no-repeat;"}

.no4{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:227px 53px,left bottom ; background-repeat:no-repeat;"}

.no5{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:300px 53px,left bottom ; background-repeat:no-repeat;"}

.no6{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:373px 53px,left bottom ; background-repeat:no-repeat;"}

.no7{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:446px 53px,left bottom ; background-repeat:no-repeat;"}
4

1 に答える 1

1

その要素の唯一のクラスである場合noN、それは多かれ少なかれ自明です:

$('.next').click(function() {
  var $el = $('#someElement'),  
      elClass = $el.attr('class'),
      parts = elClass.match(/(no)([1-7])/);
  if (parts[2] === '7') {
    parts[2] = 1;
  }
  else {
    parts[2]++;
  }
  $el.removeClass(elClass).addClass(parts[1] + parts[2]);
});

ここでは、あなたのボタンを.next参照し、 - 循環させたい要素クラスを参照します。next#someElement

于 2012-11-12T23:14:49.500 に答える