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

IfnoN是该元素上唯一的类，它更简单：

$('.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 回答