javascript - 我在 AnythingSlider 中有一个 AnythingSlider，我可以为两个 slider 设置当前幻灯片的样式吗？

Question

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

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

这怎么可能？

这是 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

用demo of the solution

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;
  });
});​