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

I have an AnythingSlider within an AnythingSlider can I style the current slide for both sliders?

本文关键字：AnythingSlider 设置 幻灯片 样式 两个 有一个 我可以 我在      更新时间：2023-09-26

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

我想做的是将幻灯片"一"上的链接（"aaa"、"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; }

通过解决方案的演示

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;
  });
});​
相关文章：