我在 AnythingSlider 中有一个 AnythingSlider 我可以为两个滑块设置当前幻灯片的样式吗？

Question

示例如下： http://ashleybest.co.uk/mottie_is_the_best/index.html

我想做的是将幻灯片“一”上的链接（“Aaaa”、“Bbbb”等）设置为与控制主滑块时控制主滑块的外部链接相同的样式在当前幻灯片上。幻灯片“一”上的链接控制右侧的第二个滑块。

怎么可能呢？

CSS 的外观如下：

.link-1.current, .link-1:hover { text-decoration:underline; color:#BAA5EC; }
.link-2.current, .link-2:hover { text-decoration:underline; color:#BAA5EC; }
.link-3.current, .link-3:hover { text-decoration:underline; color:#BAA5EC; }
.link-4.current, .link-4:hover { text-decoration:underline; color:#BAA5EC; }
.link-a.current, .link-a:hover { text-decoration:underline; color:#BAA5EC; }
.link-b.current, .link-b:hover { text-decoration:underline; color:#BAA5EC; }
.link-c.current, .link-c:hover { text-decoration:underline; color:#BAA5EC; }
.link-d.current, .link-d:hover { text-decoration:underline; color:#BAA5EC; }

Answer 1

使用解决方案演示

HTML

<table>
<tbody>
<tr>
  <td id="sliderbg" valign="bottom">
    <div class="nav1">
      <a class="nav link-1" href="#1"><span>One</span></a>
      <a class="nav link-2" href="#2"><span>Two</span></a>
      <a class="nav link-3" href="#3"><span>Three</span></a>
      <a class="nav link-4" href="#4"><span>Four</span></a>
    </div>
    <ul class="slider1">
      <li>
        <div class="nav2">
          One:
          <a class="nav link-a" href="#2">Aaaa</a> |
          <a class="nav link-b" href="#3">Bbbb</a> |
          <a class="nav link-c" href="#4">Cccc</a> |
          <a class="nav link-d" href="#5">Dddd</a>
        </div>
      </li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
  </td>
  <td id="sliderbg" valign="bottom">
    <ul class="slider2">
      <li>Select an item on the left to view here</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </td>
</tr>
</tbody>
</table>

CSS

.slider1, .slider2, .slider1 li, .slider2 li {
  width: 300px;
  height: 200px;
  list-style: none;
}

#sliderbg {
  background-color: #444;
  color: #ddd;
}

.nav { text-decoration:none; color:#fff; }
.nav.current, .nav:hover { text-decoration:underline; color:#BAA5EC; }

脚本

$(function() {
  $('.slider1').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onInitialized: function(e, slider) {
      $('.nav1').find('a').eq(slider.currentPage - 1).addClass('current');
    },
    onSlideInit: function(e, slider) {
      $('.nav1').find('a').removeClass('current').eq(slider.targetPage - 1).addClass('current');
    },
  });
  // set up external links
  $('.nav1 a').click(function() {
    var slide = $(this).attr('href').substring(1);
    $('.slider1').anythingSlider(slide);
    return false;
  });

  $('.slider2').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onInitialized: function(e, slider) {
      $('.nav2').find('a').eq(slider.currentPage - 1).addClass('current');
    },
    onSlideInit: function(e, slider) {
      $('.nav2').find('a').removeClass('current')
      // subtract 2 because we don't have a link to the first slide
      .eq(slider.targetPage - 2).addClass('current');
    },
  });
  // set up external links
  $('.nav2 a').click(function() {
    var slide = $(this).attr('href').substring(1);
    $('.slider2').anythingSlider(slide);
    return false;
  });
});​